Ember checkbox input helper

Question

I'm trying to use one of Ember's checkbox input helpers which is placed inside a div with an action assigned to it. The problem I'm having is that now clicking the checkbox doesn't work correctly and instead the container's action helper is called.

App.MyCheckboxComponent = Ember.Component.extend({

    isSelected: false,

    actions: {
        containerClicked: function(e) {
            alert('container clicked');
        }
    }

});

I created a fiddle to show this in action. Does anyone know how I can prevent this?

I'd like for clicking the checkbox to update its bound value.

While clicking outside the checkbox container should trigger the action associated with the container.

With general purpose actions you can set bubbles=false but this doesn't seem to work with input helpers. Thanks!

Even though you've created a fiddle, you should put the relevant code in your question. — Jan, Jul 04 '15 at 22:37
Would you mind explaining why? It seems to me that in this case the context is more important than the relevant line or so of code. Also thanks for making the edit before I could even get to it :) — user2027202827, Jul 04 '15 at 22:41
If nothing else, someone familiar with the concept could just glance at your code and answer it without clicking a link. It's just 10 lines of code, not including it just makes the asker seem lazy. And you don't want to seem lazy if you want someone to help you. :) And from http://stackoverflow.com/help/how-to-ask *"also include the code in your question itself. Not everyone can access external sites, and the links may break over time"* — Jan, Jul 04 '15 at 22:48
Thanks for the explanation, references, and changing my mind :) — user2027202827, Jul 04 '15 at 22:51
That is actually sort of the opposite of what I'm trying to do. Your link talks about passing actions up the tree while I'm in a way trying to prevent an action from making it to my component. Unfortunately I don't have any control over events that the handlebars helper generates. Thanks for more suggestions though. — user2027202827, Jul 05 '15 at 01:29
My initial investigations along with this (top answer has made the wrong conclusion ) http://stackoverflow.com/questions/25895551/ember-checkbox-nested-in-action-dosnt-change-value leads me to believe that what you're asking for just isn't possible with ember though. Either file it as a bug with the team or choose a different library would be my suggestion. — Jan, Jul 05 '15 at 01:30
Yes, that link is more similar to the problem I'm having. I am using the handlebars helper though and am not trying to update the bound value in my action. I took the question over to ember discuss to try and draw a larger ember audience since I'm a bug report noob :) After that I'll hopefully move on to the bug report. — user2027202827, Jul 05 '15 at 01:37
Well it depends, it might be a bug, it might be intended behaviour. It certainly looks like a bug to me though. — Jan, Jul 05 '15 at 01:39

score 1 · Accepted Answer · answered Jul 05 '15 at 10:02

I came across exactly the same problem when I worked on it last time.
Here is, what my mentor and I decided to do.

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.MyCheckboxComponent = Ember.Component.extend({

  isSelected: false,
  actions: {
    containerClicked: function(e) {
      alert('container clicked');
    },
    test: function(e) {
      this.toggleProperty('isSelected');
    }

  }

});

/* Put your CSS here */

html,
body {
  margin: 20px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{my-checkbox}}
</script>

<script type="text/x-handlebars" data-template-name="components/my-checkbox">
  <div {{action 'containerClicked'}} style="background-color:#cccccc;">
    {{#if isSelected}}
    <input type="checkbox" {{action 'test' bubbles=false}} checked></input>
    {{else}}
    <input type="checkbox" {{action 'test' bubbles=false}}></input>
    {{/if}} {{isSelected}}
  </div>
</script>

PS: I don't know this is best solution or not, all I know that it is best working solution I know.. :)

Enjoy..

Thanks for your thoughts on this. After a little more experimenting, it seems like a better solution than what I had come up with. In the end I decided to just indicate selection using CSS styling though since all I need is to show an item is selected. Thanks for the help. — user2027202827, Jul 05 '15 at 17:44

Ember checkbox input helper

1 Answers1