0

次のように正常に動作するコンポーネントを取得しました (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リストが選択されますが、アイテムはなくなります(まだマークアップにあると考えられます)

4

1 に答える 1

1

Selectコンポーネントに必要なすべてを解決したので、Ember Power selectコンポーネントを使用することを強くお勧めします

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

単一選択エントリと複数選択エントリの 2 つのコンポーネントがあります。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 プロジェクトが取得されます。

それが役に立てば幸い。

于 2016-06-25T13:43:50.777 に答える