What is the difference between [], @each, content and <arrayName> in EmberJS?

Question

I looked around, but I can not find good documentation about what the actual differences between the following are:

Ember.Object.extend({ // ... myProperty1: function() { /* ... */ }.property('myArray'), myProperty2: function() { /* ... */ }.property('myArray.content'), myProperty3: function() { /* ... */ }.property('myArray.[]'), myProperty4: function() { /* ... */ }.property(' myArray.@each ') }); 

I understand that .content seems to be the internal storage of the array for a property that may not be available if it is a PromiseArray . I also understand that @each will not be used this way, but mainly for accessing the ProxyArray , which generates the results by displaying the internal properties of each of the elements in this array.

Besides these subtle differences, they seem to work almost the same. But what about myArray and myArray.[] ? What about them in agreement with the rest?

Answer 1

 Ember.Object.extend({ // ... // Updates if myArray is set to a new value using .set myProperty1: function() { /* ... */ }.property('myArray'), // Updates if myArray is an Ember Object (like an ArrayController) // and its 'content' property is set to a new value using // .set('content', newArray) or .replaceContent(...) // which can also happen implicitly // Also note that for an ArrayController 'content' is an alias of 'model' myProperty2: function() { /* ... */ }.property('myArray.content'), // Updates if myArray is an Ember Array or ArrayProxy or MutableEnumerable // and it is 'mutated' using myArray.addObject(s), myArray.removeObject, // myArray.popObject, myArray.shiftObject, myArray.pushObject(s), etc. myProperty3: function() { /* ... */ }.property('myArray.[]'), // Updates if myArray is an Ember Array or ArrayProxy and one of it's // elements is set to a new value using .set or .replace // such as this.set('myArray.firstObject', 10) or // this.get('myArray').replace(2, 1, [10]); myProperty4: function() { /* ... */ }.property(' myArray.@each ') }); 

I will also note that if you forget to use one of the Ember methods and just update the array using simple JavaScript:

 this.myArray = []; 

none of these computed properties will be updated.