javascript - EmberJS 中的 []、@each、content 和 之间有什么区别？

Question

我环顾四周，但找不到任何关于以下内容之间实际差异的好文档:

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

我确实理解 .content 似乎是属性数组的内部存储，如果这恰好是 PromiseArray，则可能不可用。我也明白 @each 不会以这种方式使用，但主要是为了访问 ProxyArray，它通过映射每个对象的内部属性来生成结果此数组中的元素。

除了这些细微差别外，它们的工作原理似乎几乎相同。但是 myArray 和 myArray.[] 呢？与其他人相比，他们又如何呢？

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')
});

我还会注意到，如果您忘记使用 Ember 的一种方法而只是使用简单的 JavaScript 更新数组，如下所示:

this.myArray = [];

这些计算属性都不会更新。