Создание компонента Ember.js с помощью bootstrap-select, добавление Ember <! ----> к элементам DOM

Question

Я пытаюсь обернуть bootstrap-select в компонент как часть моих усилий по изучению и пониманию Ember.js. Тем не менее, я сталкиваюсь с проблемой, когда кажется, что Ember мешает элементам DOM, созданным плагином.

При вызове плагина с .selectpicker() на didInsertElement (или даже через цикл выполнения Ember) он генерирует / изменяет DOM для выпадающего списка неправильно. Текст внутри <options> превращаются в <!---->, который имеет отношение к 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}}

Рассматриваемые элементы DOM - обратите внимание на <!----> который появляется вместо текста.

<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>

<select> который генерируется Ember без bootstrap-select:

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

Еще раз, это прекрасно работает, когда сделано с консоли. Есть идеи? Я в конце остроумие здесь.

ОБНОВЛЕНИЕ: просто, чтобы показать, что это работает с точки зрения возможностей, которые фактически используются, и всего остального - только текст в выпадающем списке, который генерируется с помощью bootstrap-select, пуст. Это все еще можно выбрать, хотя. Ember Twiddle здесь: http://ember-twiddle.com/5637ed5974e5d1e79906 (я не могу заставить селектор выбора работать на самом деле в Ember Twiddle, но вы увидите, что противники вытянуты и все такое)

Answer 1

В соответствии,

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

this соответствует Ember.ComponentИспользовать this.get('element') чтобы получить select,

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

И предоставить класс для компонента: Ссылка. Просто class:'selectpicker' раньше работал. Не уверен, будет ли это сейчас.

ОБНОВЛЕНИЕ: Добавьте этого наблюдателя к вашему компоненту и проверьте,

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