Ember.js 中的绑定属性 "for"

Question

我正在尝试为和标签包含一个唯一 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>

Answer 1

从 version 1.11 开始，您不需要 bind-attr。您应该能够像这样绑定属性：

<label for={{binding}}></label>

Answer 2

首先，您应该将所有这些包装在一个组件中。

你真的不应该像这样手动绑定 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:

绑定

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

这是一个有效的 jsbin for ember 1.7.1 and here 是一个适用于 ember 1.11.1.

的有效 jsbin

Ember.js 中的绑定属性 "for"

Bind-attr "for" attribute in Ember.js

javascript

data-binding

handlebars.js

ember.js