The Computedproperty of Emberjs

Computed Property (CP) 1. What is CP?

In a nutshell, the computed properties let you declare functions as properties. You create one by defining a computed property as a function, which Ember would automatically call when you ask for the pro Perty. You can then use it the same to would any normal and static property.

App.person =Ember.Object.extend ({//these'll be supplied by ' create 'FirstName:NULL, LastName:NULL, FullName:function() {    return  This. Get (' firstName ') + ' + This. Get (' LastName '); }.property (' FirstName ', ' lastName ')});varIronman =App.Person.create ({firstName:"Tony", LastName:"Stark"}); Ironman.get (' FullName ');//"Tony Stark."

Here FullName is a CP, which relies on firstname,lastname.

Another: CP can also be written as follows, it is recommended to avoid the "disable" function of the property expansion caused by the problem.

function () {    returnthis. Get (' LastName ');  })

2. Definition of noun description in CP

2.1 Cp:computed property.

2.2 CP attribute: ' FullName ' in the example above.

2.3 CP relies on the source attribute: ' FirstName ', ' lastName ' in the example above.

2.4 CP callback method: function in the example above () {...} Method.

2.5 The Setter/getter of the CP attribute:

3. CP key Principles (features)

3.1 Only the CP callback method may be triggered when the CP attribute is acquired or set, that is, the CP attribute is a lazy load (behavior loaded when used).

3.2 When the CP attribute is dependent on. Property (' Person{name,age} '), the CP property cannot be updated only if the Person.name or person.age changes.

3.3 When the CP attribute is dependent on. Property (' [email protected] '), the following four conditions change:

• The CP property is recalculated when the IsLoaded property of any element in the columns is changed (when the CP property is set or acquired).
• Columns The CP property is recalculated when adding elements or deleting child elements (when the CP property is set or acquired).
• The columns array itself is re-assigned, triggering the CP property recalculation (when the CP property is set or acquired).
• Columns other property changes in an array element will not trigger the CP property recalculation (when the CP property is set or acquired).
• Note that only works one level deep @each . You cannot use nested forms like [email protected] or [email protected]@each.name .

3.4 When the CP attribute depends on the. Property (' [email protected] '), its behavior changes as follows:

• When columns adds or deletes an element, the CP attribute is recalculated (when the CP property is set or acquired).
• When the columns itself is replaced or re-assigned, the CP attribute is recalculated (when the CP property is set or acquired).

3.5 When the CP attribute depends on the. Property (' columns.[] ') , the following changes occur in its behavior:

Same behavior as 3.4 binding. Property (' [email protected] ').

3.6 When the CP property is set through the Set method and then the Get method is called to get the CP property, the CP callback is not called and the set value is cached.

3.7 When inheriting the CP attribute, the object retains the independence of the CP attribute, does not interfere with each other, and overrides the CP dependency When overridden, changing the dependency source.

3.8 Property changes occur only three times when there are two interdependent CP attributes.

3.9 Do not attach the dependency property of the CP to another CP attribute.

3.10 When the CP property is dependent on the object list, such as. Property (' A.b.c.d '), the attribute is recalculated when any object on the node changes (when the CP property is called).

4. CP macro Definition

General principle: When a CP-dependent property is changed, a recalculation of the macro is triggered (triggering a callback function) when the CP value is called.

Ember.computed.empty:empty (property name) returns BOOL

Ember.computed.not:not (property name) returns BOOL

Ember. Computed.alias:alias (attribute name), two-way binding , alias does not depend on a CP.

Ember.computed.defaultTo: If the CP property is null, the dependency property value is read once

Ember.computed.match (property name, matching string)

Ember.computed.gt (attribute name, number), greater than return bool

Ember.computed.gte (attribute name, number), greater than or equal to bool

Ember.computed.and (property name, property name), and set

Ember.computed.or (property name, property name), intersection

Ember.computed.collect (Array) , matches all items, no phase is null

Ember.computed.oneWay (attribute name) , single-direction from source to PC property, and executes only once.

Ember.computed.readOnly (attribute name) , theCP Property is not allowed to be set, but the source attribute that the CP relies on updates the CP value.

For more macro definitions please refer here: Http://emberjs.com/api/classes/Ember.computed.html#method_alias

5. CP Usage Scenario

5.1 On the object we use, we want to use a property value to listen for changes to one or more properties, or the CP attribute is strongly dependent on some properties, and it can also cache the CP attribute value to reduce performance loss. (see 3.1 for CP features)

5.2 CP can rely on multiple properties on an object, especially binding on a collection element or even listening to a property within a collection element, but with a hierarchical limit. For example. Property (' Person{name,age} ') or. Property (' pencilbox.[] ', [email protected] ', [email protected]). (see 3.2, 3.3, 3.4 for CP features)

5.3 Ember.computed.alias acts on a two-way binding of two strongly related objects and provides a caching mechanism.

5.4 Using CP to combine attributes, the CP attribute callback cannot have a loop, asynchronous method such as boundary effect.

6. Sample Code

varComputedcount = 0; Module (' CP test ', {beforeeach:function() {Computedcount= 0; }, Aftereach:function() {}}); Test (' Should change dependency property value when the CP property changed and the binding style is Ember.computed.alias ',function(assert) {varperson =Ember.Object.extend ({name:' Alex Matchneer ', Nomen:Ember.computed.alias (' Name ')  }); varAlex =person.create (); Alex.get (' nomen ');//' Alex matchneer 'Alex.get (' name ');//' Alex matchneer 'Alex.set (' nomen ', ' @machty '); Assert.ok (Alex.get (' name '), ' @machty ');}); Test (The ' should change CP property was dependency property changed changed and the binding style is Ember.computed.alias ',function(assert) {varperson =Ember.Object.extend ({name:' Alex Matchneer ', Nomen:Ember.computed.alias (' Name ')  }); varAlex =person.create (); Alex.get (' nomen ');//' Alex matchneer 'Alex.get (' name ');//' Alex matchneer 'Alex.set (' Name ', ' @machty '); Assert.ok (Alex.get (' nomen '), ' @machty ');}); Test (' Should compute fullName when dependency property of columns inner item changed and binding style is [email protected] ',function(assert) {varperson =Ember.Object.extend ({columns: [Ember.Object.create ({isDone:true, isloading:false}), Ember.Object.create ({isDone:false, isloading:false}), Ember.Object.create ({isDone:true, isloading:false})], fullName:Ember.computed (function(key, value) {Computedcount++; return  This. Columns.length; }). Property (' [Email protected] ')  }); varClient =person.create (); Client.get (' FullName '); Assert.ok (Computedcount= = 1); Client.get (' Columns '). Objectat (1). Set (' IsLoading ',true); Client.get (' FullName '); Assert.ok (Computedcount= = 1); Client.get (' Columns '). Objectat (1). Set (' IsDone ',true); Client.get (' FullName '); Assert.ok (Computedcount= = 2); Client.get (' Columns '). RemoveAt (1); Client.get (' FullName '); Assert.ok (Computedcount= = 3); Client.get (' Columns '). AddObject (Ember.Object.create ({isDone:true, isloading:false })); Client.get (' FullName '); Assert.ok (Computedcount= = 4); Client.set (' Columns ',[]); Client.get (' FullName '); Assert.ok (Computedcount= = 5);}); Test (' Should compute fullName when dependency property of columns inner item changed and binding style is [email protected] ',function(assert) {varperson =Ember.Object.extend ({columns: [Ember.Object.create ({isDone:true, isloading:false}), Ember.Object.create ({isDone:false, isloading:false}), Ember.Object.create ({isDone:true, isloading:false})], fullName:Ember.computed (function(key, value) {Computedcount++; return  This. Columns.length; }). Property (' [Email protected] ')  }); varClient =person.create (); Client.get (' FullName '); Console.log ("After get FullName, Computedcount should is equal" +computedcount); Client.get (' Columns '). Objectat (1). Set (' IsLoading ',true); Client.get (' FullName '); Console.log (After set isloading to True, Computedcount should is equal "+computedcount); Client.get (' Columns '). Objectat (1). Set (' IsDone ',true); Client.get (' FullName '); Console.log (After set IsDone to True, Computedcount should is equal "+computedcount); Client.get (' Columns '). RemoveAt (1); Client.get (' FullName '); Console.log (After remove column item, Computedcount should is equal "+computedcount); Client.get (' Columns '). AddObject (Ember.Object.create ({isDone:true, isloading:false })); Client.get (' FullName '); Console.log ("After Add new object, Computedcount should is equal" +computedcount); Client.set (' Columns ',[]); Client.get (' FullName '); Console.log ("After replace itself, Computedcount should is equal" +computedcount); Assert.ok (true);}); Test (' Should compute fullName when the dependency property of columns inner item changed and the binding style is columns. []‘,function(assert) {varperson =Ember.Object.extend ({columns: [Ember.Object.create ({isDone:true, isloading:false}), Ember.Object.create ({isDone:false, isloading:false}), Ember.Object.create ({isDone:true, isloading:false})], fullName:Ember.computed (function(key, value) {Computedcount++; return  This. Columns.length; }). Property (' Columns. []‘)  }); varClient =person.create (); Client.get (' FullName '); Console.log ("After get FullName, Computedcount should is equal" +computedcount); Client.get (' Columns '). Objectat (1). Set (' IsLoading ',true); Client.get (' FullName '); Console.log (After set isloading to True, Computedcount should is equal "+computedcount); Client.get (' Columns '). Objectat (1). Set (' IsDone ',true); Client.get (' FullName '); Console.log (After set IsDone to True, Computedcount should is equal "+computedcount); Client.get (' Columns '). RemoveAt (1); Client.get (' FullName '); Console.log (After remove column item, Computedcount should is equal "+computedcount); Client.get (' Columns '). AddObject (Ember.Object.create ({isDone:true, isloading:false })); Client.get (' FullName '); Console.log ("After Add new object, Computedcount should is equal" +computedcount); Client.set (' Columns ',[]); Client.get (' FullName '); Console.log ("After replace itself, Computedcount should is equal" +computedcount); Assert.ok (true);});

View Code

The Computedproperty of Emberjs