EmberJS - 复选框和获取控制器中的值 [英] EmberJS - Checkboxes and Getting Values in Controller

问题描述

下面是一个简单的例子，我打算使用复选框。我有一个数组的 id 和 name 字段，每个帖子可以分配一个或多个条件/类别。

  var config = {}; 
 
 config.terms = [
 {id：1，termName：'Red'}，
 {id：2，termName：'Green'}，
 { id：3，termName：'Blue'} 
]; 
  

问题

使用EmberJS句柄表达式我显示这些复选框，但我很困惑用作表单元素变量 name 字段似乎没有在控制器中定义。 checked 字段用作控制器属性，但是当我添加 termName 作为选中时，所有复选框都默认选中，

我需要获取控制器的名称是所选的术语名称
$ b

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

HTML

 < div id =main> < / div> 
 
< script type =text / x-handlebarsdata-template-name =index> 
 {{#each term in terms}} 
 {{input type =checkboxname = term.name}} {{term.name}} 
 {{/ every}} 
< button {{actionsubmit}}>提交< / 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）; 
} 
} 
}）; 
  

解决方案

在你的jsfiddle示例中，复选框的选中值。我想这不是你想做的。

检查的值应该绑定到一个布尔值。

因此，

第一种方法：向您的术语对象添加属性）

  config.terms = [
 {id：1，name：'Red' ：false}，
 {id：2，name：'Green'，selected：false}，
 {id：3，name：'Blue'，selected： 
  

（作为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 =checkboxchecked = term.selected}} 
  

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

 你的控制器里面：
 redSelected：false，
 greenSelected：false，
 blueSelected：false，
 
 
 {{input type =checkboxchecked = controllingler.redSelected}} 
  

Below is a simple example how I intend to use check boxes. What I have is an array of terms with id and name field and each post can be assigned to a single or multiple terms/categories.

var config = {};

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

Problem

With EmberJS handlebar expression I am showing those checkboxes but I am confused what to use as form element variable name field doesn't seem to defined in the controller. The checked field works as controller property but when I add termName as checked all of the checkboxes are checked by default and label after checking changes after clicking checkboxes.

What I need to get on the controller is the term names that are selected

Below is the example code. You can also find it on JsFiddle. Check uncheck the red/green/blue checkboxes to see the problem. Also have a look in console.

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);
        }
    }
});

解决方案

In you jsfiddle example you'r binding the name to the checked value of the checkbox. I think that's not what you want to do.

The checked value should be bound to a boolean value.

So,

1st approach: either add a property to your term object (selected: false)

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

(as Ember objects:)

 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 })
 ];

and then bind the property in your template this way:

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

2nd approach: bind it to controller properties:

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


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

这篇关于EmberJS - 复选框和获取控制器中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！