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

Question

I've looked around but I cannot find any good documentation on what the actual differences are between the following:

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

I do understand that .content seems to be the internal storage of the array for the property, which may not be available if this happens to be a PromiseArray. I also understand that @each would not be used in this fashion, but mostly to access to a ProxyArray that generates results as a result of mapping the internal properties of each of the elements in this array.

Besides those subtle differences, they seem to work pretty much the same. But what about myArray and myArray.[]? And what about them in constrast 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'll also note that if you forget to use one of Ember's methods and simply update the array using simple JavaScript like this:

this.myArray = [];

none of these computed properties will be updated.