我正在尝试为 和 标签包含一个唯一 ID 以获得自定义复选框。 {{input}}
标签输出正确但 <label {{bind-attr for=binding}}
才不是。我是 Ember 的新前端人员,所以我相信这应该是微不足道的。
<ul class="col-menu dropdown-menu">
{{#each columns}}
<li>
{{input type="checkbox" checked=checked id=binding}}
<label {{bind-attr for=binding}}><span></span></label>
<span>{{heading}}</span>
{{columns}}
</li>
{{/each}}
</ul>
这是输出...
<li>
<input id="activityTotal" class="ember-view ember-checkbox" type="checkbox" checked="checked">
<label data-bindattr-2689="2689">
<span></span>
</label>
<span>
<script id="metamorph-53-start" type="text/x-placeholder"></script>
Events
<script id="metamorph-53-end" type="text/x-placeholder"></script>
</span>
<script id="metamorph-54-start" type="text/x-placeholder"></script>
<script id="metamorph-54-end" type="text/x-placeholder"></script>
最佳答案
首先,您应该将所有这些包装在一个组件中。
你真的不应该像这样手动绑定(bind) id,因为 ember 在内部使用它,但我认为在这种情况下这是可以接受的,因为我想不出更好的方法,但你需要保持唯一性。
我想要这样的东西来确保 id 是唯一的并使用
checkBoxId: Ember.computed(function(){
return "checker-" + this.elementId;
}),
这是组件运行时将执行的组件的 javascript 文件:
App.XCheckboxComponent = Ember.Component.extend({
setup: Ember.on('init', function() {
this.on('change', this, this._updateElementValue);
}),
checkBoxId: Ember.computed(function(){
return "checker-" + this.elementId;
}),
_updateElementValue: function() {
this.sendAction();
return this.set('checked', this.$('input').prop('checked'));
}
});
这是组件的模板,我使用 unbound
将唯一的 checkBoxId
与标签的 for 绑定(bind):
<label for="{{unbound checkBoxId}}">
{{label}}
<input id="{{unbound checkBoxId}}" type="checkbox" {{bind-attr checked="checked"}}>
</label>
以下是您可能如何使用它:
<ul>
{{#each contact in model}}
<li>{{x-checkbox label=contact.name enabled=contact.enabled}}</li>
{{/each}}
</ul>
关于javascript - Ember.js 中的 Bind-attr "for"属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29710752/