Ember.checkbox nested in action doesn't change value

Question

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 'checked' property. But when I click on the ckeckbox - nothing happens. What can be the reason?

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

Can you add a bin showing the issue? You can create one here: http://emberjs.jsbin.com/ — tikotzky, Sep 17 '14 at 16:35
I updated my post with link to jsbin. As you can see, nothing happens when you click a ckeckbox — Alexey, Sep 18 '14 at 09:11

score 0 · Answer 1 · answered Sep 17 '14 at 17:01

I would argue that you are not following "The Ember Way" in two different ways here.

First, Ember.Checkbox is an internal Ember class (http://emberjs.com/api/classes/Ember.Checkbox.html). The recommended way to render a checkbox is to use the Handlebars input helpers (http://emberjs.com/guides/templates/input-helpers/#toc_checkboxes). This is just wrapping Ember.Checkbox anyway.

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

Instead, simply bind the Ember Handlebars Input Helper directly to your value like this:

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

Thank you, Josh. But I guess it won't be changed when I click on the div. I need to change isSelected when either div or checkbox is clicked. That's why I've created {{action}} — Alexey, Sep 17 '14 at 17:29
Ah, then you should just be able to add your `{{action}}` right back into the div! Just make sure that you click EITHER your `{{action}}` or your checkbox, but not both. By the way, if you're just trying to get the label to be clickable, you can use some HTML tricks to accomplish this. http://stackoverflow.com/questions/6293588/how-to-create-an-html-checkbox-with-a-clickable-label — Josh Padnick, Sep 17 '14 at 19:32

score 0 · Accepted Answer · answered Sep 18 '14 at 13:14

The issue is that when you click on the checkbox 2 things happen.

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

So the isActive property ends up staying in the same state that it was.

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

The template would 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 the css would look like

label {
 display: block; 
}

you would then be able to get rid of the selectRow action completely because clicking on the label will trigger the checkbox.

You can see a working bin here: http://emberjs.jsbin.com/nuvocumuteto/3/edit

Ember.checkbox nested in action doesn't change value

2 Answers2

Linked