Ember.js hasMany 作为复选框列表 [英] 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 关系,我想使用复选框在现有子项之间进行选择.
I want to use checkboxes to choose between the existing children, for the hasMany relation.
例如,我有这三个孩子:
For example, I have these three children:
App.Child.FIXTURES = [
{ id: 1, name: 'Brian' },
{ id: 2, name: 'Michael' },
{ id: 3, name: 'James' }
];
用户应该能够在创建或编辑活动时使用复选框来选择要添加到 hasMany 关系的孩子.
The user should be able to use checkboxes, while creating or editing an activity, for choosing which children, to add to the hasMany relation.
我创建了一个 JSFiddle 来说明我的问题:http://jsfiddle.net/Dd6Wh/.点击创建新活动"以查看我正在尝试做什么.
I've created a JSFiddle to illustrate my question: http://jsfiddle.net/Dd6Wh/. Click 'Create a new activity' to see what I'm trying to do.
基本上与 Ember.Select [ ... ] multiple="true" 相同,但用于复选框.
Basically it's the same as Ember.Select [ ... ] multiple="true", but for checkboxes.
使用 Ember.js 处理此类问题的正确方法是什么?
What's the correct approach for something like this with Ember.js?
推荐答案
您可以在 each
视图助手中使用 itemController
来管理选择.在下面的代码中,我创建了一个名为 ChildController
:
You can use an itemController
in your each
view helper to manage the selection. In the code below I created one called 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
观察者.
With a itemController you can expose some properties and logics, without add it directlly to your models. In that case the selected
computed property and the selectedChanged
observer.
在您的模板中,您可以使用 checkedBinding="selected"
绑定选择.因为itemController代理每个模型,所以会用到itemcontroller的selected
属性,{{name}}
绑定,会查找模型的name属性:
In your template, you can bind the selection using checkedBinding="selected"
. Because the itemController proxy each model, the selected
property of the itemcontroller will be used, and the {{name}}
binding, will lookup the name property of the model:
<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>
编辑模板中的相同方法:
The same aproach in edit template:
<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/
This is a fiddle with this working 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/
希望能帮到你
这篇关于Ember.js hasMany 作为复选框列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!