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

您可以按照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}}

Answer 2

模型并不意味着包含数据，它们定义了将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')
});

Ember不能使用数组属性迭代模型

2 个答案: