Question

我是Ember的新手，目前正在开发3.8版本的Ember。我只想在组件文件中初始化数组，然后在模板文件中使用数组。预先感谢。

Answer 1

@mistahenry建议在init函数中初始化数组，例如

init() {
    this._super(...arguments);
    this.set('foo', [{
      id: 0,
      name: "baz"
    }, {
      id: 1,
      name: "bazzz"
    }]);
  }

否则在最新的Ember 3.8中出现eslint抛出错误。

在js方面，您可以像

那样进行初始化

import { computed } from '@ember/object';

export default Component.extend({
  foo: computed(function() {
    return [{id:0,name:"baz"},{id:1,name:"bazzz"}]
  }),
  ...
});

在模板方面，只需调用您的变量

{{#each foo as |item|}}
  {{item.name}}
{{/each}}

Answer 2

初始化Ember对象（组件是其子类）上的数组的最佳方法是使用Ember A帮助器。该函数返回一个新的可变数组（在常规[]之上提供了许多有用的方法。

新语法：

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

export default class MyComponent extends Component {
  myArray = A()
}

旧语法

export default Component.extend({
  myArray: A()
})

为什么这甚至是个问题？因为在定义组件时，是在为该组件定义工厂。当需要使用它时，ember返回该组件类的新实例。 javascript中的数组是可变的，并按引用存储，因此，当您更新该数组，然后创建一个新的组件实例时，该数组的新值也会被更新。

有关更多信息，请参见本文：https://dockyard.com/blog/2015/09/18/ember-best-practices-avoid-leaking-state-into-factories

Answer 3

您可以使用组件/控制器中的init钩子来创建新的Ember.NativeArray。

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

export default Component.extend({
  tagName: 'ul',
  classNames: ['pagination'],

  init() {
    this._super(...arguments);

    if (!this.get('content')) {
      this.set('content', A());
      this.set('otherContent', A([1,2,3]));
    }
  }
});

在Ember JS组件中初始化数组

3 个答案: