1

チェックボックスの外観を変更するために、ブートストラップ スイッチを使用しています。

そのライブラリは基本的に、その作業を行うために div で囲まれた標準入力タグを必要とします。

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

以下のようにEmberでカスタムビューを作成しましたが、これはほとんど機能します! 初期バインディングがありません。最初はスイッチはオフですが、Ember モデルの値は true です (何が起こっているかを確認するための通常のチェックボックスがまだあります)。スイッチをオンにすると、バインドしている値と同期され、機能します。その後、スイッチを使用して値を切り替えることができます。

スイッチがバインドされている値を取得するのではなく、最初から常に false である理由が不思議です。

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 に最初に設定されます。それを変更する方法がわからない。

ビューに設定attributeBindings: ['checked']することで、ember はcheckedプロパティの値をビューの div にバインドします。この場合、checked プロパティをタグにバインドする必要があります。これは{{bindAttr}}、ビューのテンプレートで次を使用して実行できます。

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

これで、input タグの属性がビューのプロパティcheckedにバインドされます。checked

于 2013-04-15T17:59:29.500 に答える