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

從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與標簽的綁定：

<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 ， 這是適用於ember 1.11.1的jsbin。