Question

我试图让bootstrap-select与Ember.js合作。关于Ember管理视图对象的一些事情，阻止它按预期工作。

$("select").selectpicker()可以正常选择，并替换Ember.Select视图HTML但是Ember会被破坏。

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

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

Answer 1

这不是bootstrap select组件，而是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

我还添加了这个以使select2选择对selectionBinding的更改做出反应：

_underlyingSelectionDidChange: Ember.observer((function() {
   this.$().select2('val', this.$().val().toString());
}), "selection.@each");

Answer 3

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

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

例如，见 JSFiddle。

在早期版本的Ember中，由于手柄模板的渲染方式，它可能无法正常工作。

Answer 4

我建议看看ember-cli-select-picker插件是否为ember。它可能不是你想要的，因为bootstrap 3下拉提供了很多自定义的可能性。但是，对它进行调查并将其作为一个起点，这是一个很好的观点。

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

4 个答案: