集成引导-选择与Ember一起工作

Question

我想让引导-选择和Ember.js一起工作。关于Ember对视图对象的管理，这使得它无法按预期工作。

JSFiddle

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

.ember-view类是这里负责的，您可以破解它，从select和选项中删除该类以使引导-select工作，但是当然ember不再关注它，从而破坏了目的。

有人对EmberView有足够的了解吗？我应该尝试重写Ember.Select吗？或者引导选择是否需要更改？我在源代码的海洋中漂泊。

Answer 1

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

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

例如，请参见JSFiddle。

在早期版本的Ember中，由于呈现工具栏模板的方式，它可能无法工作。

Answer 2

这不是引导选择组件，而是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和willDestroyElement来引导select。

如果您真的需要引导选择，那么这可能是您需要的东西：https://github.com/emberjs-addons/ember-bootstrap

希望它能帮上忙

Answer 3

我还添加了这些内容，以使select2选择能够对selectionBinding的更改做出反应：

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