控制器上的动态循环属性

Question

我正在使用 ember 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 自己的 Ember.NativeArray and it's 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 的重构将解决该问题，因为 class 字段不会在实例之间泄漏。对于旧的 Ember 基于对象的 classes，初始化 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()

控制器上的动态循环属性

dynamic looping on a controller property

ember.js

ember-cli

控制器上的动态循环 属性

dynamic looping on a controller property

ember.js

ember-cli

控制器上的动态循环属性