Ember 无法使用数组属性迭代模型

Question

我有一个模特，values.js:

import DS from 'ember-data';

export default DS.Model.extend({
    values: [
        { name: "Quality", isChecked: DS.attr('bool') },
        { name: "Inspiration", isChecked: DS.attr('bool') },
        { name: "Creativity", isChecked: DS.attr('bool') },
        { name: "Commitment", isChecked: DS.attr('bool') },
        { name: "Honour", isChecked: DS.attr('bool') }
    ]
});

在passport-values.js 的路线中，我正在创建一个价值观模型：

import Ember from 'ember';

export default Ember.Route.extend({
    model () {
        return this.store.createRecord('values');
    }
});

我有一个组件，passport-basic.hbs：

<h2>{{title}}</h2>
<p>{{content}}</p>
<form>
    <fieldset class="checkboxes">
        {{#each model as |value index|}}
            <label>{{input type="checkbox" onchange=(action "change") checked=value.isChecked name="value.name"}}{{value.name}}</label>
        {{/each}}
    </fieldset>
</form>

我从我的模板 passport-values.hbs 中使用它，并将我的模型传递给：

{{passport-basic title="" content="" model=values}}

在组件中，我尝试遍历模型中数组中的所有值，以显示带有名称和复选框的标签，该标签表示每个值的 isChecked 选项是否为真/假。我已经尝试了很多其他来源的想法，但我似乎无法完成这项工作。

感谢您的帮助，我对 Ember.js 还是很陌生，我想知道我是否缺少一些东西？

Answer 1

模型并不意味着包含数据，它们定义了将 JSON 有效负载转换为记录的属性。

属性用于将从服务器返回的 JSON 有效负载转换为记录，以及序列化记录以在修改后保存回服务器时使用。 https://guides.emberjs.com/v2.15.0/models/defining-models/#toc_defining-attributes

如果您不需要持久化数据或者您只是在测试模板。您可以定义一个数组并将其作为模型传递给您的路线。

import Ember from 'ember';

export default Ember.Route.extend({
    values: [
      { name: "Quality", isChecked: false },
      { name: "Inspiration", isChecked: false },
      { name: "Creativity", isChecked: false },
      { name: "Commitment", isChecked: false },
      { name: "Honour", isChecked: false }
    ],
    model () {
      return this.get('values');
    }
});

编辑：作为更正，从技术上讲，您可以在没有数据库的情况下以这种方式创建记录，但您无法保存它。

正确的语法应该是。

import DS from 'ember-data';

export default DS.Model.extend({
  quality: DS.attr('boolean'),
  inspiration: DS.attr('boolean'),
  honor: DS.attr('boolean'),
  creativity: DS.attr('boolean'),
  commitment: DS.attr('boolean')
});

Answer 2

您可以按照 Defining Models 和 Finding Records 的指南中的示例以您描述的方式迭代集合，并利用 Ember 的内置方法来持久化记录。

您的价值模型应如下所示：

import DS from 'ember-data';

export default DS.Model.extend({
  quality: DS.attr('boolean'),
  inspiration: DS.attr('boolean'),
  honor: DS.attr('boolean'),
  creativity: DS.attr('boolean'),
  commitment: DS.attr('boolean')
});

然后在你的路线上，做

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('value');
  }
});

您的模型挂钩将返回一组值，您可以按照您的描述将这些值传递给组件：

{{passport-basic title="" content="" model=values}}

您可以像这样在模板中使用值属性：

{{#each model as |value|}}
  <p>{{value.honor}}</p>
{{/each}}