javascript - Ember.js 中的 Bind-attr "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

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

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

这是一个有效的 jsbin对于 ember 1.7.1 和 here是 ember 1.11.1 的工作 jsbin。