Question

我正在尝试为an和tag添加唯一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与标签“{/ p>”绑定在一起：

<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和here是一个有效的jsbin for ember 1.11.1。

Bind-attr＆＃34; for＆＃34; Ember.js中的属性

2 个答案: