在 Ember JS 组件中初始化数组

Question

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

Answer 1

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

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

否则 eslint 抛出最新 Ember 3.8.

的错误

在 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 对象（组件是 class 的子组件）上初始化数组的最佳方法是使用 Ember A 助手。这是一个 returns 新可变数组的函数（它在常规 [] 之上提供了很多有用的方法。

新语法：

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 returns 该组件的一个新实例 class。 javascript 中的数组是可变的并通过引用存储，因此当您更新该数组，然后创建一个新的组件实例时，数组的新值也会更新。

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

Answer 3

您可以通过在 component/controller 中使用 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 组件中初始化数组

Initialize Array in Ember JS Component

javascript

ember.js