使用Ember.js中的模型數據填充複選框值

Question

我有一個擁有大量用戶的應用程序應用程序。這些用戶中的每一個都可以與多個主題相關聯。所以我有一個主題模式：

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麻煩：在我的模板中號的關係。我有一個編輯用戶模板（Im也用於創建用戶），您可以在其中通過複選框選擇用戶的主題。但是，我希望這些複選框由我的subjects模型中的數據驅動。這可能嗎？我在網上發現了很少的文檔，並且對於開發而言是非常新的。這裏是我的模板：

<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> 

編輯：這是我目前的userController.js

App.UserController = Ember.ObjectController.extend({ 

    deleteMode: false, 

    actions: { 
    delete: function(){ 

     this.toggleProperty('deleteMode'); 
    }, 
    cancelDelete: function(){ 

     this.set('deleteMode', false); 
    }, 
    confirmDelete: function(){ 
     // this tells Ember-Data to delete the current user 
     this.get('model').deleteRecord(); 
     this.get('model').save(); 
     // and then go to the users route 
     this.transitionToRoute('users'); 
     // set deleteMode back to false 
     this.set('deleteMode', false); 
    }, 
    // the edit method remains the same 
    edit: function(){ 
     this.transitionToRoute('user.edit'); 
    } 
    } 
}); 

Answer 1

你需要做的是改變這一行的模板：

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

此：

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

你有沒有注意到我c爲了科目而懸掛科目？

而且，我也建議您在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() 

是這樣的數據得到更好的代表。