Question

以下是我打算如何使用复选框的简单示例。我所拥有的是包含id和name字段的一系列字词，每个帖子都可以分配给单个或多个字词/类别。

var config = {};

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

问题

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

我需要在控制器上获得的是选择的术语名称

以下是示例代码。您也可以在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示例中，您将名称绑定到复选框的选中值。我认为这不是你想要做的。

选中的值应绑定到布尔值。

所以，

第一种方法：向术语对象添加属性（选中：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 })
 ];

然后以这种方式绑定模板中的属性：

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

第二种方法：将其绑定到控制器属性：

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


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

EmberJS - 复选框和控制器中的值

问题

HTML

JS

1 个答案: