Ember复选框输入助手

Question

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

App.MyCheckboxComponent = Ember.Component.extend({

    isSelected: false,

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

});

我创造了一个小提琴来展示这一点.有谁知道我怎么能阻止这个？

我想点击复选框来更新其绑定值.

在复选框容器外部单击时,应触发与容器关联的操作.

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

享受..