Integrating bootstrap-select to work with Ember

Question

I\'m trying to get bootstrap-select working with Ember.js. Something about Ember\'s management of view objects that prevents it from working as intended.

JSFiddl

Answer 1

This is not the bootstrap select component but the select2 (much nicer :) and this is how we have set it up to play nicely with the ember select view:

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");
  }
})

and then we use it like so:

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

I think although it is for the select2 component you can use the same hooks didInsertElement and willDestroyElement for the bootstrap select component.

And if you really need the bootstrap select, then maybe this is something for you: https://github.com/emberjs-addons/ember-bootstrap

Hope it helps