javascript - Ember 复选框输入助手

Question

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

App.MyCheckboxComponent = Ember.Component.extend({

    isSelected: false,

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

});

我创建了一个 fiddle在行动中展示这一点。有谁知道我该如何防止这种情况？

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

虽然在复选框容器外单击 应该触发与容器关联的操作。

对于通用操作，您可以设置 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:我不知道这是不是最好的解决方案，我只知道这是我所知道的最好的解决方案.. :)

享受..