Ember.js有一个复选框列表 [英] Ember.js hasMany as list of checkboxes

问题描述

我有以下两种模式：

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

And：

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.

例如，我有三个孩子：

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 [...] 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?

推荐答案

您可以在每个视图中使用 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，您可以公开一些属性和逻辑，而无需直接添加到您的模型中。在这种情况下，选择计算属性和 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的选择的属性，并且 {{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>

同样的编辑模板：

<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有一个复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！