Ember.js的hasMany爲複選框

Question

的名單上有以下兩種模式：

App.Child = DS.Model.extend({ 
    name: DS.attr('string') 
}); 

和：

App.Activity = DS.Model.extend({ 
    children: DS.hasMany('child',{async:true}), 
    name: DS.attr('string') 
}); 

我想使用複選框現有的兒童之間進行選擇，爲的hasMany關係。

例如，我有三個孩子：

App.Child.FIXTURES = [ 
    { id: 1, name: 'Brian' }, 
    { id: 2, name: 'Michael' }, 
    { id: 3, name: 'James' } 
]; 

用戶應該能夠使用複選框，在創建或編輯的活動，對於選擇這孩子，要添加到的hasMany關係。

我創建了一個JSFiddle來說明我的問題：http://jsfiddle.net/Dd6Wh/。點擊「創建新活動」查看我想要做的事情。

基本上和一樣Ember.Select [=] multiple =「true」，但是對於複選框。

對於Ember.js這樣的東西，正確的方法是什麼？

Answer 1

您可以在您的each視圖助手中使用itemController來管理選擇。在下面我創建了一個名爲ChildController代碼：

App.ChildController = Ember.ObjectController.extend({  
    selected: function() { 
     var activity = this.get('content'); 
     var children = this.get('parentController.children'); 
     return children.contains(activity); 
    }.property(), 
    selectedChanged: function() { 
     var activity = this.get('content'); 
     var children = this.get('parentController.children'); 
     if (this.get('selected')) {          
      children.pushObject(activity);    
     } else {          
      children.removeObject(activity);              
     }   
    }.observes('selected') 
}); 

隨着itemController可以公開一些屬性和邏輯，沒有directlly將其添加到您的模型。在這種情況下，selected計算屬性和selectedChanged觀察員。

在您的模板中，您可以使用checkedBinding="selected"綁定選擇。由於itemController代理的每個模式，itemcontroller的selected財產將被使用，並且{{name}}結合，將查找模型的name屬性：

<script type="text/x-handlebars" data-template-name="activities/new"> 
    <h1>Create a new activity</h1> 

    {{#each childList itemController="child"}} 
     <label> 
      {{view Ember.Checkbox checkedBinding="selected"}} 
      {{name}} 
     </label><br /> 
    {{/each}} 
    {{view Ember.TextField valueBinding="name"}} 
    <button {{action create}}>Create</button> 
</script> 

在編輯模板相同的形式給出：

<script type="text/x-handlebars" data-template-name="activities/edit"> 
    <h1>Edit an activity</h1> 

    {{#each childList itemController="child"}} 
     <label> 
      {{view Ember.Checkbox checkedBinding="selected"}} 
      {{name}} 
     </label><br /> 
    {{/each}} 
    {{view Ember.TextField valueBinding="name"}} 
    <button {{action update}}>Update</button> 
</script> 

這是該工作http://jsfiddle.net/marciojunior/8EjRk/

組件版本小提琴

模板

<script type="text/x-handlebars" data-template-name="components/checkbox-select"> 
    {{#each elements itemController="checkboxItem"}} 
     <label>    
      {{view Ember.Checkbox checkedBinding="selected"}} 
      {{label}} 
     </label><br /> 
    {{/each}}  
</script> 

的Javascript

App.CheckboxSelectComponent = Ember.Component.extend({ 
    /* The property to be used as label */ 
    labelPath: null, 
    /* The model */ 
    model: null, 
    /* The has many property from the model */ 
    propertyPath: null, 
    /* All possible elements, to be selected */ 
    elements: null, 
    elementsOfProperty: function() { 
     return this.get('model.' + this.get('propertyPath')); 
    }.property() 
}); 

App.CheckboxItemController = Ember.ObjectController.extend({  
    selected: function() {   
     var activity = this.get('content'); 
     var children = this.get('parentController.elementsOfProperty');   
     return children.contains(activity); 
    }.property(), 
    label: function() {  
     return this.get('model.' + this.get('parentController.labelPath')); 
    }.property(), 
    selectedChanged: function() { 
     var activity = this.get('content'); 
     var children = this.get('parentController.elementsOfProperty'); 
     if (this.get('selected')) {          
      children.pushObject(activity);    
     } else {          
      children.removeObject(activity);              
     }   
    }.observes('selected') 
}); 

更新小提琴http://jsfiddle.net/mgLr8/14/

我希望它能幫助