控制器属性上的动态循环

Question

我正在使用余烬2.17。

我将此属性添加到了controller：

export default Controller.extend({
  newAttachments: new Array()
  ...
})

我通过此控制器action在其中添加元素：

setAttachment(file) {
  console.log('trying');
  this.get('newAttachments').push(file);
}

当我使用该操作时，该消息将显示在控制台中，并且在Ember检查器中，我可以看到该数组不再为空：

但是，视图中的以下代码没有输出：

{{#each newAttachments as |file|}}
  <p>in loop</p>
{{/each}}

为什么不显示任何内容？在一个组件中它可以工作，为什么不在这里？

Answer 1

Ember无法观察本机数组。因此，框架不知道将值推入数组。您应该使用余烬自己的Ember.NativeArray，而应该使用pushObject method。这样可以确保在将条目添加到数组或从数组删除条目时通知框架。更改后的代码如下所示：

import { A } from '@ember/array';

export default Controller.extend({
  newAttachments: A(),

  setAttachment(file){
    this.get('newAttachments').pushObject(file)
  }
})

您不应将数组添加为EmberObject的属性，因为这可能会导致实例之间的泄漏。在这种情况下，这不是生产问题，因为控制器是ember.js中的单例。但是您可能会在测试中看到奇怪的行为。重构native classes将解决该问题，因为实例之间的类字段不会泄漏。对于旧的基于EmberObject的类，在init挂钩中初始化值或使用计算属性是解决该问题的常用方法：

// computed property
import { computed } from '@ember/object';
import { A } from '@ember/array';

export default Controller.extend({
  newAttachments: computed(() => A()),
});

// init hook
import { A } from '@ember/array';

export default Controller.extend({
  init() {
    this._super(...arguments);

    this.set('newAttachments', A());
  }
});

请注意，如果运行Ember> = 3.1，则无需使用get()。