javascript - EmberJS - 复选框和在 Controller 中获取值

Question

下面是我打算如何使用复选框的简单示例。我拥有的是一组带有 id 和 name 字段的术语，每个帖子都可以分配给一个或多个术语/类别。

var config = {};

config.terms = [
    {id: 1, termName: 'Red'},
    {id: 2, termName: 'Green'},
    {id: 3, termName: 'Blue'}
];

问题

使用 EmberJS handle 表达式，我显示了这些复选框，但我很困惑要使用什么作为表单元素变量 name 字段似乎没有在 Controller 中定义。 checked 字段用作 Controller 属性，但当我将 termName 添加为已选中时，默认情况下会选中所有复选框，并在单击复选框后检查更改后添加标签。

我需要在 Controller 上获取的是所选的术语名称

下面是示例代码。您还可以在 JsFiddle 上找到它。选中取消选中红色/绿色/蓝色复选框以查看问题。还要查看控制台。

HTML

<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    {{#each term in terms}}
        {{input type="checkbox" name=term.name}} {{term.name}}
    {{/each}}
    <button {{action "submit"}}>Submit</button>
</script>

JS

var config = {};

config.terms = [
    {id: 1, name: 'Red'},
    {id: 2, name: 'Green'},
    {id: 3, name: 'Blue'}
];

App = Ember.Application.create({
    rootElement: '#main'
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller){
        controller.set('terms', config.terms);
    }
});

App.IndexController = Ember.Controller.extend({
    actions: {
        submit: function(){
            console.log(this.Red);
            console.log(this.Blue);
            console.log(this.Green);
        }
    }
});

Answer 1

在 jsfiddle 示例中，您将名称绑定(bind)到复选框的选中值。我认为这不是您想要做的。

检查的值应绑定(bind)到 bool 值。

所以，

第一种方法:向术语对象添加属性(选择: false)

 config.terms = [
     {id: 1, name: 'Red', selected: false },
     {id: 2, name: 'Green', selected: false },
     {id: 3, name: 'Blue', selected: false }
 ];

(作为 Ember 对象:)

 config.terms = [
     Em.Object.create({id: 1, name: 'Red', selected: false }),
     Em.Object.create({id: 2, name: 'Green', selected: false }),
     Em.Object.create({id: 3, name: 'Blue', selected: false })
 ];

然后以这种方式绑定(bind)模板中的属性:

{{input type="checkbox" checked=term.selected}}

第二种方法:将其绑定(bind)到 Controller 属性:

// inside your controller:
redSelected: false,
greenSelected: false,
blueSelected: false,


{{input type="checkbox" checked=controlller.redSelected}}