Twitter bootstrap 集成引导选择以使用Ember

我正在尝试使用Ember.js。有关Ember对视图对象的管理的一些信息，这些信息会阻止它按预期的方式工作

$（“select”）.selectpicker（）

可以正常选择并替换余烬。select查看HTML，但余烬视图已损坏

.ember视图

类是这里的责任所在，您可以对其进行黑客攻击，将该类从选择和选项中删除，以使引导选择工作，但当然，ember不再关注它，这违背了目的

---

有人足够了解EmberView来实现这一点吗？我是否应该尝试覆盖余烬。选择？或者引导选择是否需要更改？我在源代码的海洋中漂泊。

这不是引导选择组件，而是（更好的：），这就是我们如何设置它以很好地使用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>

{{view App.Select2SelectView
id=“mySelect”
contentBinding=“App.staticData”
optionValuePath=“content.id”
optionLabelPath=“content.label”
selectionBinding=“controller.selectedId”}

我认为，尽管它是用于组件，但对于引导选择组件，您可以使用相同的钩子

didInsertElement

和

willDestroyElement

如果您真的需要引导选择，那么也许这是适合您的：

---

希望对您有所帮助

我还添加了此选项，以使select2 selection对selectionBinding的更改做出反应：

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

---

它只需在视图的

didInsertElement

函数中调用

selectpicker（）

，即可在当前的生产版本Ember.js（1.8）和Handlebar（1.3）中工作

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

例如，请参见 .

---

在早期版本的Ember中，由于手柄模板的呈现方式，它可能不起作用。

我建议查看Ember的插件。它可能不是您真正想要的，因为Bootstrap3下拉列表提供了许多定制的可能性。但这可能是一个很好的切入点，并将其作为一个起点。

尚未设置此功能，但看起来正是我所需要的。谢谢当数据更改时，此代码不会对select2进行任何更新。select2是否会在select html元素更改时自动执行此操作？我尝试了这一点，但以编程方式更改的选定值不会显示。只有那些您使用ui手动/显式选择的。好的一点：我做了如下操作：

selectedCategoridydChange:function（）{//do this.get（'selectedCategories'）}.observes（'selectedCategories.@each'）