Ember.js：将Ember.Checkbox与另一个使用其ID的元素包装在一起

Question

我试图在Ember中使用第三方复选框，但无法使其正常工作。 第三方复选框需要这样的标记：

<input type="checkbox" id="foo" name="bar" class="baz"/>
<label for="foo">blah</label>

我认为最简单的方法是创建自己的视图FancyCheckbox来封装此模式。 主要障碍似乎是使用标签的for属性中的复选框ID。 这是我尝试过的：

App.FancyCheckbox = Ember.Checkbox.extend({
  templateName: 'fancyCheckbox',
  tagName: '',
});

这是我使用的模板：

<script type="text/x-handlebars" data-template-name="fancyCheckbox">
  <input type="checkbox" {{bindAttr id="view.elementId"}}/>
  <label {{bindAttr for="view.elementId"}}/>
</script>

不幸的是，这不能正确获取复选框的事件。 我认为这与缺少封闭的div有关。 但是当我制作一个封闭的div时，我不知道如何正确地将属性绑定连接到复选框。

这是一个展示我上面的内容的jsfiddle 。

Answer 1

看起来像tagName: ''正在将您的FancyCheckbox拧紧http://jsfiddle.net/mlienau/pEfwt/