Ember.js 中的绑定属性“for”属性

Question

我正在尝试为 and 标记添加一个唯一 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

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

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

这里是用于 ember 1.7.1 的工作 jsbin，here 是用于 ember 1.11.1 的工作 jsbin。

Answer 2

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

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