7

Bootstrap-selectを Ember.js で動作させようとしています。Ember のビュー オブジェクトの管理に関するもので、意図したとおりに動作しません。

JSFiddle

$("select").selectpicker()通常の選択では問題なく動作し、Ember を置き換えます。HTML を選択しますが、Ember のものは壊れています。

クラスはここ.ember-viewで責任を負うものであり、それをハックして選択とオプションからそのクラスを削除し、ブートストラップ選択を機能させることができますが、もちろん、ember はもはやそれに注意を払わず、目的を破ります。

これを機能させるのに十分なEmberViewを理解している人はいますか? Ember.Select をオーバーライドしてみる必要がありますか? または、bootstrap-select を変更する必要がありますか? 私はソース コードの海に漂っています。

4

4 に答える 4

10

これはブートストラップの select コンポーネントではなく、select2 です(もっといいですね :)。

App.Select2SelectView = Ember.Select.extend({
  prompt: 'Please select...',
  classNames: ['input-xlarge'],

  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
  },

  processChildElements: function() {
    this.$().select2({
        // do here any configuration of the
        // select2 component
    });
  },

  willDestroyElement: function () {
    this.$().select2("destroy");
  }
})

そして、次のように使用します。

<div class="controls">
    {{view App.Select2SelectView
        id="mySelect"
        contentBinding="App.staticData"
        optionValuePath="content.id"
        optionLabelPath="content.label"
        selectionBinding="controller.selectedId"}}
</div>

select2コンポーネント用ですが、同じフックdidInsertElementとブートストラップselectコンポーネントを使用できると思いwillDestroyElementます。

そして、ブートストラップの選択が本当に必要な場合は、おそらくこれがあなたのためのものです: https://github.com/emberjs-addons/ember-bootstrap

それが役に立てば幸い

于 2013-05-15T15:06:38.397 に答える
2

また、これを追加して、select2 の選択を selectionBinding の変更に反応させるようにしました。

_underlyingSelectionDidChange: Ember.observer((function() {
   this.$().select2('val', this.$().val().toString());
}), "selection.@each");
于 2013-10-12T03:30:05.350 に答える