集成bootstrap-select以与Ember一起使用

Question

我正在尝试使用Ember.js进行bootstrap-select.关于Ember管理视图对象的一些事情,阻止它按预期工作.

的jsfiddle

$("select").selectpicker() 正常选择可以正常工作,并取代Ember.Select视图HTML但是Ember视图已被破坏.

这个.ember-view类是负责任的,你可以破解它从select和options中删除该类来进行bootstrap-select工作,但当然ember不再关注它,打败了目的.

有人了解EmberView足以使这项工作？我应该尝试覆盖Ember.Select吗？或者bootstrap-select需要改变吗？我徘徊在源代码的海洋中.

Answer 1

这不是bootstrap选择组件,而是select2(更好:) :)这就是我们如何设置它以便与ember select视图很好地配合:

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和willDestroyElement引导选择组件.

如果你真的需要引导程序选择,那么也许这适合你:https://github.com/emberjs-addons/ember-bootstrap

希望能帮助到你

Answer 2

它可以在当前生产的 Ember.js 版本 (1.8) 和车把版本 (1.3) 中工作，只需调用selectpicker()视图的didInsertElement函数即可

didInsertElement: function(){
    $("#selectPicker").selectpicker()
}

例如，请参阅 JSFiddle。

在 Ember 的早期版本中，由于车把模板的渲染方式，它可能不起作用。