Question

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

App.MyCheckboxComponent = Ember.Component.extend({

    isSelected: false,

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

});

我创建了一个fiddle来展示这一点。有谁知道我怎么能阻止这个？

我想点击复选框以更新其约束值。

当在复选框容器外部单击时，应该触发与容器相关联的操作。

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

Answer 1

上次我上班时遇到了同样的问题这是我的导师和我决定做的事情。

＆＃13;

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');
    }

  }

});

＆＃13;

/* Put your CSS here */

html,
body {
  margin: 20px;
}

＆＃13;

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

＆＃13;

PS：我不知道这是最好的解决方案，我知道这是我知道的最好的解决方案.. :)

<强>享受..

Ember复选框输入助手

1 个答案: