Integrating bootstrap-select to work with Ember

后端 未结 4 2086
离开以前
离开以前 2021-02-04 17:37

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

相关标签:
4条回答
  • 2021-02-04 18:16

    I would suggest to look at ember-cli-select-picker addon for ember. It probably not extactly what you are looking for, because bootstrap 3 dropdowns gives many possibilities for customization. But it good be a good point to look into it and take it as a start point.

    0 讨论(0)
  • 2021-02-04 18:25

    I also added this to make select2 selection react to selectionBinding changing:

    _underlyingSelectionDidChange: Ember.observer((function() {
       this.$().select2('val', this.$().val().toString());
    }), "selection.@each");
    
    0 讨论(0)
  • 2021-02-04 18:28

    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:

    <div class="controls">
        {{view App.Select2SelectView
            id="mySelect"
            contentBinding="App.staticData"
            optionValuePath="content.id"
            optionLabelPath="content.label"
            selectionBinding="controller.selectedId"}}
    </div>
    

    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

    0 讨论(0)
  • 2021-02-04 18:37

    It is working in current production Ember.js version (1.8) and handlebars version (1.3), by simply calling selectpicker() in view's didInsertElement function

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

    For examplee see JSFiddle.

    In earlier versions of Ember it probably did not work due to the way handlebar templates were rendered.

    0 讨论(0)
提交回复
热议问题