1

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

1 回答 1

2

“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属性。

于 2013-04-15T17:59:29.500 回答