Question

我正在使用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}}

Answer 1

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

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

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

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

Ember自定义复选框

1 个答案: