Disposable data Binding in AngularJS 1.3 (one-time bindings)

Talk about disposable data binding in ANGULARJS 1.3 (one-time bindings)

Not long ago, the AngularJS 1.3 release, which added a lot of sexual features, but also fixed some of the previous bugs, most importantly, it contains some breakthrough changes. One of the most important items is the addition of a one-time data binding.

Wait, disposable data binding? Does this sound like a complete departure from the idea of bidirectional data binding that Angularjs has been preaching? Of course, Angularjs's bidirectional data binding has always been one of the most important features of ANGULARJS. However, in order to achieve bidirectional data binding, ANGULARJS needs to set a listener (watcher) for each bound value. When data needs to be bound more and more, a heap of listeners can have a bad effect on the performance of the application. Before we get into the specifics of one-time data binding, let's briefly review how bidirectional data binding is in Angularjs.

Understanding bidirectional data binding and listeners

To implement bidirectional data binding, ANGULARJS uses the $watch API to observe model changes in the scope of the period. The specific scope depends on how your code is written. If you do not create a self-scoped, which means that you do not use ngController instructions to create an association between your DOM and your controller code, you may be dealing with scopes $rootScope , this scope ngApp is created automatically, and is the parent scope of all scopes in the app, of course, If you choose to start Angularjs manually, it's a matter of other things.

Whenever you create a data binding, ANGULARJS automatically creates a listener to listen for changes in the data. For example, here's a simple example:

< P > Hello {{name}}! </ P >

In this example, we used an interpolation instruction that registers a listener to listen for changes in the properties in the corresponding scope name and reacts to the DOM in real time when the property changes.

Add the following code, and your name property will be automatically assigned to Pascal :

Angular.module (' myApp ', [])    . Run (function  ($rootScope) {     = "Pascal";}]);

Using the code above, we successfully created a data binding on the attempt with the interpolation instruction. Now, if the name property changes, the view will automatically update. For example, we add the following code to modify the value when the button is clicked name :

<ng-click= "name = ' Christoph '">click me! </ Button >

At this point, click the button, we can name change the value to Christoph , and we will trigger a $digest loop to update the corresponding part of the DOM. In the example above, you look at the knowledge of one-way data binding. However, you can use ngModel directives to react to the model in real time to the changes that occur in the view.

The implementation of the two-way binding magic above relies entirely on $digest loops, and when the $digest loop is triggered, ANGULARJS will process all the listeners in the current scope and sub-scopes, and then update the values in the DOM by examining the changes that occur in the model until the model no longer changes. Once $digest the loop is done, the browser will re-render the DOM to reflect the model data changes.

There are too many issues with the listener

Now that we know about ANGULARJS's data binding mechanism, you might ask why we need one-time data binding.

Because Angularjs uses listeners to implement data binding. There may be some performance problems when the listener gets more and more. Because the listener is registered, a callback function is also registered so that the $digest view can be updated accordingly when the loop executes. In other words, the more listeners, the more callback functions Angularjs need to handle.

Now assume that there are many values in the view that need to be angularjs processed. For example, like the above using an interpolation directive for data binding, although we may not want this value to be bound only once, for example Pascal , above, in the application of code execution of the entire process of this property will not change, but angularjs by default will still bind a listener and callback function in this property. So, at the $digest time, Angularjs still going to deliberately 关注 this value, which is a bit overdone.

Disposable data binding (one-time bindings)

That's why we need disposable data binding. In Angularjs's documentation, we can clearly understand the role of this new feature:

A one-time data-binding expression can be used after the data is stable and does not need to be recalculated in the $digest loop ...

The occurrence of one-time data binding addresses the performance issues mentioned earlier by too many listeners. So how do we use disposable data binding?

Using one-time data binding is very simple, we just need to precede the expression with a double colon :: . For example, we used an interpolation directive to name bind properties to a view:

< P > Hello {{name}}! </ P >

Using one-time data binding, we write:

< P > Hello {{:: name}}! </ P >

In the Angularjs 1.3 release, you can use one-time data binding in any ANGULARJS expression. ng-repeatyou can still use it even in instructions that are heavily dependent on two-way binding. In a custom directive, you can use this in a property:

<two-way-attribute= ":: Onewayexpression"></  Custom-directive>

Summarize

The advent of one-time data binding solves the Angularjs performance problem, and the official version of native support also makes it unnecessary for us to use bindonce such third-party modules. From one-time data binding to native code, we can see that angularjs is constantly taking good ideas from the community and making changes in a timely manner. AngularJS 1.3 is just a small phase of AngularJS evolution, and in the official commitment of AngularJS 2.0, we can expect a surprise when it comes to us.

This document is referenced from exploring ANGULAR 1.3-one-time BINDINGS, original address http://blog.thoughtram.io/angularjs/2014/10/14/ Exploring-angular-1.3-one-time-bindings.html

Reprinted from: http://www.html-js.com/article/ Using-angular-to-develop-web-application-of-angularjs-13-in-onetime-data-binding-onetime-bindings

Disposable data Binding in AngularJS 1.3 (one-time bindings)