twitter-bootstrap - 集成 bootstrap-select 以使用 Ember

Question

我正在尝试获取 bootstrap-select使用 Ember.js。 Ember 对 View 对象的管理导致其无法按预期工作。

JSFiddle
$("select").selectpicker()适用于正常选择，并替换 Ember.Select View HTML，但 Ember 已损坏。
.ember-view类是这里的责任，您可以破解它以从选择和选项中删除该类以使 Bootstrap 选择工作，但是当然 ember 不再关注它，从而破坏了目的。

任何人都足够了解 EmberView 来完成这项工作？我应该尝试覆盖 Ember.Select 吗？还是 bootstrap-select 需要改变？我在源代码的海洋中漂泊。

Answer 1

这不是 Bootstrap 选择组件，而是 select2 (好多了 :) 这就是我们如何设置它以与 ember 选择 View 很好地配合使用:

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组件，您可以使用相同的 Hook didInsertElement和 willDestroyElement对于 Bootstrap 选择组件。

如果您真的需要 Bootstrap 选择，那么也许这适合您: https://github.com/emberjs-addons/ember-bootstrap

希望能帮助到你