[英]Ember.js hasMany as list of checkboxes
我有以下兩種型號:
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這樣的事情,正確的方法是什么?
您可以在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,您可以公開一些屬性和邏輯,而無需將其直接添加到模型中。 在這種情況下, 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/
我希望它有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.