组件中的 Emberjs“eq”答案

【问题标题】：Emberjs "eq" in component组件中的 Emberjs“eq”
【发布时间】：2016-06-25 13:27:42
【问题描述】：

得到了一个可以正常工作的组件，如下所示（肯定设置了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 列表，但是这些项目已经消失了（仍然在标记中）

【问题讨论】：

标签： ember.js ember-components

【解决方案1】：

我绝对会推荐您使用 Ember Power 选择组件，因为它们已经解决了您选择组件所需的一切

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 项目。

希望对你有帮助。

【讨论】：