0

我正在尝试将bootstrap-select包装在一个组件中，作为我学习和理解 Ember.js 的一部分。但是，我遇到了一个问题，Ember 似乎干扰了插件创建的 DOM 元素。

当使用.selectpicker()on 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 元素 - 请注意<!---->出现在文本位置的 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 （我无法让 selectpicker 在 Ember Twiddle 中实际工作，但你会看到 opps 被拉了过去）

下拉菜单有效，存在机会，但缺少文本

4

1 回答 1

1

在行中，

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

this对应Ember.Component,this.get('element')用来获取select.

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

并为一个组件提供类：Link。以前刚class:'selectpicker'上班。不确定现在会不会。

更新：将此观察者添加到您的组件并检查，

    onChange : function(){
        Ember.run.scheduleOnce('afterRender',this,function(){ 
            $(this.get('element')).selectpicker('refresh');
        });
    }.observes('opportunities'),
于 2015-09-11T17:00:00.013 回答