7

我正在尝试让bootstrap-select与 Ember.js 一起使用。Ember 对视图对象的管理导致其无法按预期工作。

JSFiddle

$("select").selectpicker()适用于正常选择，并替换 Ember.Select 视图 HTML，但 Ember 已损坏。

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

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

4

4 回答 4

10

这不是引导选择组件，而是select2（更好:)，这就是我们如何设置它以与 ember 选择视图很好地配合使用：

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

希望能帮助到你

于 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 回答
1

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

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

例如见 JSFiddle。

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

于 2014-12-01T08:48:58.333 回答
0

我建议查看ember-cli-select- picker 的 ember 插件。它可能不完全是您正在寻找的东西，因为 bootstrap 3 下拉菜单提供了许多自定义的可能性。但最好是研究它并将其作为起点。

于 2015-03-23T14:14:32.397 回答