6

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!

8
  • Even though you've created a fiddle, you should put the relevant code in your question.
    – Jan
    Jul 4, 2015 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 :)
    – hobenkr
    Jul 4, 2015 at 22:41
  • 1
    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 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 4, 2015 at 22:48
  • Thanks for the explanation, references, and changing my mind :)
    – hobenkr
    Jul 4, 2015 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.
    – hobenkr
    Jul 5, 2015 at 1:29

1 Answer 1

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

1
  • 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.
    – hobenkr
    Jul 5, 2015 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.