Question

有一个组件可以正常工作，如下所示（selectedId肯定是设置的）：

export default Ember.Component.extend({
    store: Ember.inject.service(),
    items: [],
    selectedId: 0,
    result: '',
    init () {
        this._super(...arguments);
        var store = this.get('store'); 
        let items =  store.findAll('dealtype');
        this.set('items', items);
    },
    didInsertElement: function() {
       // this.$().select2();
     }
});

这使得我的组件很好，但if语句永远不会变为true（为此安装了ember-truth-helpers）

<select style="width:100%">
    <option value=""></option>
    {{#each items as |item|}}
        {{#if (eq selectedId item.id)}}
            <option selected="selected" value="{{item.id}}">{{item.name}} YEAH</option>
        {{else}}
            <option  value="{{item.id}}"> {{item.name}} </option>
        {{/if}}
    {{/each}}
</select>

不想混淆问题，但正如您所看到的，我注释掉了select2 init调用。这样做时，我会选择一个select2列表，但项目已经消失（仍然在标记中）

Answer 1

我肯定会建议你使用Ember Power选择组件，因为它们已经解决了Select component

所需的一切

http://www.ember-power-select.com/

他们有两个组件用于单个选择条目和多个。有一个很好的文档和对ember cli项目的大力支持

https://github.com/cibernox/ember-power-select

至于你的问题，我会尝试这个 - 我没有测试过它，但是我应该解决你的问题：

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement : function(){
  this._super();
  Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},
afterRenderEvent : function(){
var component = this;
Ember.run.later((function() {
  Ember.$('select').select2({
    minimumInputLength: 2,
    delay: 250}).on('select2-open', function() {}
  })
});

所以你需要使用的是aaferRenderEvent并稍后运行以初始化你的select 2组件。如果所有{}都已正确关闭，请检查代码。但这将使你的select2工作insdie ember项目。

希望它有所帮助。

Emberjs＆＃34; eq＆＃34;在组件中

1 个答案: