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!

Answer 1

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..