CODEWITHSUNDEEP
jqueryember.jsember-cliember-components
Constant Meiring
Constant Meiring

Reputation: 3325

Creating a Ember.js component with bootstrap-select, Ember adding <!----> to DOM elements

I'm trying to wrap bootstrap-select in a component as part of my effort to learn and understand Ember.js. However, I'm running into an issue where it looks like Ember interferes with the DOM elements created by the plugin.

When calling the plugin with .selectpicker() on didInsertElement (or even through the Ember run loop), it generates/modifies the DOM for the dropdown incorrectly. The text inside of the <options> are converted into <!---->, which has something to do with Glimmer AFAIK.

//compontents/opportunity-select.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'select',
    class: 'selectpicker',
    selectedOpportunityId: null,
    didInsertElement: function(){
        Ember.run.scheduleOnce('afterRender', this, () => this.$().selectpicker());
    }
});

 

//templates/components/opportunity-select.hbs

{{#each opportunities as |opportunity|}}
  <option>
        {{opportunity.name}}
  </option>
{{/each}}

The DOM elements in question - note the <!----> which appears in place of the text.

<div class="dropdown-menu open" ><ul class="dropdown-menu inner" role="menu" >
        <li data-original-index="0">
            <a tabindex="0" >
                <span class="text">
                    <!---->
              </span>
            </a>
        </li>
        <li data-original-index="1">
            <a tabindex="1">
                <span class="text">
                    <!---->
              </span>
            </a>
        </li>
      </ul>
    </div>
</div>

The <select> that gets generated by Ember without bootstrap-select:

<select id="ember592" class="ember-view">  <option>
        Opportunity 0
  </option>
  <option>
        Opportunity 1
  </option>
  <option>
        Opportunity 2
  </option>
</select>

Once again, this works perfectly fine when done from the console. Any ideas? I'm at wit's end here.

UPDATE: Just to show that is works to the point of the opportunities actually being pulled in and everything - just the text in the dropdown that's generated by bootstrap-select is blank. It still is selectable though. Ember Twiddle here: http://ember-twiddle.com/5637ed5974e5d1e79906 (i can't get selectpicker to actually work in Ember Twiddle, but you'll see that the opps gets pulled through and everything)

Dropdown works, opportunties are present, but text is missing

Upvotes: 0

Views: 604

Answers (1)

acid_srvnn
acid_srvnn

Reputation: 693

In the line,

Ember.run.scheduleOnce('afterRender', this, () => this.$().selectpicker());

this corresponds to the Ember.Component, Use this.get('element') to get the select.

$(this.get('element')).selectpicker()

And to provide class for a component : Link . Just class:'selectpicker' used to work previously. Not sure if it will now.

UPDATE : Add this observer to your component and check,

    onChange : function(){
        Ember.run.scheduleOnce('afterRender',this,function(){ 
            $(this.get('element')).selectpicker('refresh');
        });
    }.observes('opportunities'),

Upvotes: 1

Related Questions