Ember.js:使用另一个使用其ID的元素包装Ember.Checkbox

时间:2013-10-29 18:13:53

标签: ember.js

我正在尝试使用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,展示了我上面的内容。

1 个答案:

答案 0 :(得分:1)

看起来tagName: ''使您的FancyCheckbox向上拧http://jsfiddle.net/mlienau/pEfwt/