Ember 复选框输入助手

Question

我正在尝试使用 Ember 的复选框输入助手之一，该助手放置在 div 中，并为其分配了一个操作。我遇到的问题是现在单击复选框无法正常工作，而是调用了容器的操作助手。

App.MyCheckboxComponent = Ember.Component.extend({

    isSelected: false,

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

});

我创建了一个fiddle 来展示这一点。有谁知道我可以如何防止这种情况？

我希望单击复选框以更新其绑定值。

在复选框容器外单击应该触发与容器相关的动作。

使用通用操作，您可以设置bubbles=false，但这似乎不适用于输入助手。谢谢！

Answer 1

我上次处理它时遇到了完全相同的问题。
这就是我和我的导师决定要做的事情。

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：我不知道这是否是最佳解决方案，我只知道这是我所知道的最佳工作解决方案.. :)

享受..