Ember 自定义复选框答案

【问题标题】：Ember custom checkboxEmber 自定义复选框
【发布时间】：2013-04-15 14:00:38
【问题描述】：

我使用bootstrap-switch 来改变我的复选框的外观。

该库基本上需要用 div 包围的标准输入标记来完成它的工作：

<div class="switch">
    <input type="checkbox">
</div>

我在 Ember 中制作了一个自定义视图，如下所示，几乎可以正常工作！我错过了初始绑定。最初开关是关闭的，而 Ember 模型值为 true（我仍然有常规复选框来查看发生了什么）。一旦我打开我的开关，它与我绑定的值同步，它就可以工作了。然后我可以使用开关来切换值。

我想知道为什么我的开关一开始总是假的，而不是拿起它绑定的值。

App.SwitchButton = Ember.View.extend({
  checked: true,
  attributeBindings: ['checked'],
  template: Ember.Handlebars.compile('<div class="switch switch-small"><input type="checkbox"></div>'),

  init: function() {
    'use strict';

    this._super();
    this.on('change', this, this.hasChanged);
  },

  didInsertElement: function() {
    'use strict';

    $('.switch').bootstrapSwitch({});
  },

  hasChanged: function() {
    'use strict';

    this.set('checked', this.$('INPUT[type=checkbox]').prop('checked'));
  }
});

我在其中使用开关的部分模板：

{{#each issue in controller.issues}}
  <li>
    {{issue.datasetName}} <br>
    {{view Ember.Checkbox checkedBinding='issue.isActive'}}
    {{view Locationwise.SwitchButton checkedBinding='issue.isActive'}}
    <p></p>
  </li>
{{/each}}

【问题讨论】：

“checked”最初是在 div 上设置的，而不是在输入上：
。不过不知道怎么改。

标签： ember.js

【解决方案1】：

“checked”最初是在 div 上设置的，而不是在 input: 上。虽然不知道怎么改。

通过在视图上设置attributeBindings: ['checked']，ember 会将checked 属性的值绑定到视图的div。在这种情况下，您需要将选中的属性绑定到标签。这可以通过在视图模板中使用{{bindAttr}} 来完成：

template: Ember.Handlebars.compile('<div class="switch switch-small"><input type="checkbox" {{bindAttr checked="view.checked"}}></div>')

现在输入标签的checked 属性将绑定到视图的checked 属性。

【讨论】：