Javascript 使用Ember.js中的模型数据填充复选框值

我有一个ember应用程序，它有许多用户。这些用户中的每一个都可以与许多主题相关联。所以我有一个主题模型：

App.Subjects = DS.Model.extend({
  subject         : DS.attr('string'),
});

App.Subject.FIXTURES = [{
  id: 1,
  name: 'Sales',

}, {
  id: 2,
  name: 'Marketing',

}

];

和一个用户模型：

App.User = DS.Model.extend({
  name         : DS.attr(),
  email        : DS.attr(),
  subjects       : DS.hasMany('subject'),

});

App.User.FIXTURES = [{
  id: 1,
  name: 'Jane Smith',
  email: 'janesmith@thesmiths.com',
  subjects: ["1", "2"]

}, {
  id: 2,
  name: 'John Dorian',
  email: 'jd@sacredheart.com',
  subjects: ["1", "2"]
}

];

在模板中表示此1:M关系时遇到问题。我有一个编辑用户模板（我也用它来创建用户），你可以通过复选框选择用户的主题。但是，我希望这些复选框由我的

主题

模型中的数据驱动。这可能吗？我在网上发现的文档很少，而且对ember开发非常陌生。这是我的模板：

<script type = "text/x-handlebars" id = "user/edit">

<div class="input-group">
<div class="user-edit">


  <h5>User name</h5>
  {{input value=name}}

  <h5>User email</h5>
  {{input value=email}}

  <h5>Subjects</h5>

{{input type="checkbox" value = "sales" name="sales" checked=sales}}
{{input type="checkbox" value = "support" name="support" checked=support}}

</div>
<button {{action "save"}}> Save </button>
</div>
</script>

{{#each subject in user.subject}}
  {{subject.name}},
{{/each}}

---

您需要做的是更改模板中的此行：

<script type = "text/x-handlebars" id = "user/edit">

<div class="input-group">
<div class="user-edit">


  <h5>User name</h5>
  {{input value=name}}

  <h5>User email</h5>
  {{input value=email}}

  <h5>Subjects</h5>

{{input type="checkbox" value = "sales" name="sales" checked=sales}}
{{input type="checkbox" value = "support" name="support" checked=support}}

</div>
<button {{action "save"}}> Save </button>
</div>
</script>

{{#each subject in user.subject}}
  {{subject.name}},
{{/each}}

为此：

{{#each subject in user.subjects}}
  {{subject.name}},
{{/each}}

你注意到我换了一个科目了吗

此外，我还建议您在App.SubjectController中更改此代码：

selected: function() {
    var user = this.get('content');
    var subject = this.get('parentController.subjects');
    return subject.contains(user);
}.property()

为此：

selected: function() {
    var subject = this.get('content');
    var userSubjects = this.get('parentController.subjects');
    return userSubjects.contains(subject);
}.property()

---

这是一个更好的数据表示形式。

我想这可能会有帮助，非常感谢，看起来很理想-你能看看我的编辑吗？只是想知道如何使控制器代码与我已有的代码相适应。这是我的JSFIDLE。第一次编辑适用于模型中已有的数据，但不适用于创建新用户。当我进行第二次编辑并运行它时，没有任何渲染！有什么建议吗？这是我更新的提琴-是的，你的SubjectController中有一个输入错误，你有一个var subject=this.get（'parentController.subject'）；它应该是复数var subject=this.get（'parentController.subjects'）；并更改变量的名称。通过更改变量的名称，这会更好，就像我在前面的评论中所说的。顺便说一句，拼写错误在selectedChanged Observer谢谢，但是如果我做了更改nothing renders，你能告诉我编辑小提琴是什么意思吗？啊，我明白你的意思。非常感谢你的帮助。