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 选项是否为 true/false 的复选框。我已经尝试过很多其他来源的想法，但我似乎无法做到这一点。

感谢您的帮助，我对 Ember.js 还是很陌生，我想知道我是否遗漏了什么？

Answer 1

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

Attributes are used when turning the JSON payload returned from your server into a record, and when serializing a record to save back to the server after it has been modified. 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 and 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');
  }
});

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

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

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

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

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

Ember can't iterate over model with array property

arrays

components

ember.js

ember-data

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

Ember can't iterate over model with array property

arrays

components

ember.js

ember-data

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