Javascript 在Ember JS组件中初始化数组

我是新的余烬，我目前正在3.8版本的余烬工作。我只想在组件文件中初始化一个数组，然后在模板文件中使用该数组。提前感谢。

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

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

否则，eslint抛出错误与最新的余烬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}}

---

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

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

否则，eslint抛出错误与最新的余烬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}}

---

在Ember对象（组件是其子类）上初始化数组的最佳方法是使用Ember

a

helper。这是一个返回新的可变数组的函数（它在常规的

[]

之上提供了许多有用的方法）

新语法：

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中的数组是可变的，并且通过引用存储，所以当你更新该数组，然后创建一个新的组件实例时阵列也会更新

---

有关更多信息，请参阅本文：

在Ember对象（组件是其子类）上初始化数组的最佳方法是使用Ember

a

helper。这是一个返回新可变数组的函数（在常规

[]

的基础上提供了许多有用的方法）

新语法：

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中的数组是可变的，并且通过引用存储，所以当你更新该数组，然后创建一个新的组件实例时阵列也会更新

有关更多信息，请参阅本文：

您可以通过在组件/控制器中使用

init

hook来创建一个新的

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

您可以通过在组件/控制器中使用

init

hook来创建新的

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

---

---

``仅允许将字符串、数字、符号、布尔值、null、未定义和函数作为默认属性ember/避免ember对象中的泄漏状态``这是我在尝试初始化数组时收到的错误您可以使用ember twiddle生成错误吗？我想您已经使用新版本升级了ember，并出现此错误。是的我使用的是最新版本的ember js和ember cli。以前我遇到了错误，现在我重新编译了它，问题得到了解决。非常感谢您的帮助。错误是由

eslint plugin ember

提供的linting规则引起的。它应该可以避免组件实例之间的状态泄漏。如果您喜欢，请建议答案中提到，组件的每个实例都将共享同一个数组。如果它是静态的，这可能不是问题，但一旦您从该数组中添加或删除项，它就会变得奇怪。这在中期按类字段进行修复，但目前不应将数组和对象用作

EmberObject.extend（{}）中的值

。将它们包装在

computed

中是最简单的一轮工作，也是公认的做法：

computed（（）=>['bar]）

@a.KursatUZUN我认为你应该编辑你的答案。你的建议将导致任何使用最新余烬的人出现一个linting错误。要么使用建议的

jelhan

计算，要么使用

init（）{this._super（…参数）；this.set（'foo'，[{id:0，名称：“baz”}，{id:1，名称：“bazzz”}]）；}

我个人更喜欢init解决方案b/c属性不是真正意义上的

计算

``只允许错误字符串、数字、符号、布尔值、null、未定义和函数作为默认属性ember/避免ember对象中的泄漏状态``这是我在尝试初始化数组时收到的错误，您可以生成吗r ember twiddle出现错误？我想你已经用新版本升级了你的ember，并出现了此错误。是的，我正在使用最新版本的ember js和ember cli。以前我遇到了此错误，现在我重新编译了它，问题得到了解决。非常感谢你的帮助。此错误是由

eslint pl提供的linting规则引起的ugin ember

。它应该避免组件实例之间的状态泄漏。如果您按照答案中的建议进行操作，则组件的每个实例都将共享同一个数组。如果是静态的，则这可能不是问题，但一旦您从该数组中添加或删除项，它就会变得奇怪。这在期中按类字段修复，但对于tim而言因此，您不应该将数组和对象用作

EmberObject.extend（{}）

中的值。将它们包装在

computed

中是最简单的工作，也是公认的做法：

computed（（）=>['bar]）

@A.KursatUZUN我认为你应该编辑你的答案。你的建议将导致任何使用最新余烬的人出现一个linting错误。使用computed as

jelhan

suggered，或者使用

init（）{this.\u super（…arguments）；this.set（'foo'，[{id:0，name:'baz}，{id:1，name:'bazz}]）}

我个人更喜欢init解决方案b/c属性不是真正意义上的

计算的

字符串、数字、符号、布尔值、null、未定义和函数都可以作为默认属性。您不能直接初始化ember属性中的[]。您应该使用

类名：computed（function（）{return['pagination']}）

你确定吗，你检查过我邮件中的官方文档链接了吗？？？你可以看看eslint规则（奇怪的是核心团队不知道这条规则）我希望它们是正确的。

组件元素

不必遵循eslint规则。对于