...">
Geek Answers Handbook

Ember.checkbox nested does not change value

Template:

{{#each document in documents}} <div class="col-md-6" {{action "selectDocument" document}}>{{view Ember.Checkbox checked=document.isSelected}} {{document.name}}</div> {{/each}}

Controller:

 App.IndexDocumentsController = Ember.ArrayController.extend({ actions: { selectDocument: function(document){ document.set('isSelected', !document.get('isSelected')); } } });

When I click on the div, the checkbox toggles the "checked" property. But when I click on ckeckbox, nothing happens. What could be the reason?

UPDATED Link to jsbin: http://emberjs.jsbin.com/nuvocumuteto/1/edit?html,css,js,output

0
source share
2 answers

The problem is that when you click on checkbox 2, everything happens.

  • the checkbox toggles the isActive property, then
  • the selectRow action is selectRow , which again switches the isActive property

So, the isActive property is in the same state it was in.

In your case, I would get rid of the action, wrap the checkbox in <label> and set the label to display: block .

The template will look like

  <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each item in model}} <li {{bind-attr class="item.isActive:active"}}><label>{{input type="checkbox" checked=item.isActive}}{{item.name}}</label></li> {{/each}} </ul> </script>

and css will look like

 label { display: block; }

you could completely get rid of the selectRow action because clicking on the shortcut will bring up a checkbox.

Here you can see the working disk: http://emberjs.jsbin.com/nuvocumuteto/3/edit

0
source

I would say that you do not follow the Carbon Path in two different ways.

First, Ember.Checkbox is an Ember inner class ( http://emberjs.com/api/classes/Ember.Checkbox.html ). The recommended way to create a checkbox is to use the Handlebars input helpers ( http://emberjs.com/guides/templates/input-helpers/#toc_checkboxes ). Anyway, this is just a package of Ember.Checkbox .

Secondly, if you want to update the isSelected value, "Ember Way" must use two-way data bindings. Your code uses one-way data binding when it reads document.isSelected , and then tries to manually recreate the data binding in the other direction when the user clicks, manually writing the selectDocument action and calling it from {{action}} .

Instead, simply attach the Ember Handleb pen input helper directly to your value, for example:

 {{#each document in documents}} <div class="col-md-6">{{input type="checkbox" checked=document.isSelected}} {{document.name}}</div> {{/each}}
0
source

More articles:


All Articles