2

検索パラメータを入力する前に、「selected」属性に値が設定されている必要があります。

js で「destination」の値を設定し、「destination」を「selected」に割り当てることで、通常のアクション処理を行っています。そのような例については、こちらをご覧ください http://www.ember-power-select.com/docs/action-handling。

ただし、 custom-serach-action http://www.ember-power-select.com/docs/custom-search-actionに値を割り当てることはできません。

私のコード:

モデル:

  • hpqualifcation.js

    import DS from 'ember-data';
  export default DS.Model.extend({
  type_name: DS.attr('string'),
  hoprofile: DS.belongsTo('hoprofile')
});

  • hoprofile.js

    import DS from 'ember-data';
export default DS.Model.extend({
  name: DS.attr('string'),
  hpqualification: DS.hasMany('hpqualification')
});

ルート：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    return Ember.RSVP.hash({
      hpqualifications: this.store.query('hpqualification', {username: params.username}),
      …
   });
  }
})

API 側からのデータ:

{
  "hpqualification": [
    {
        "id": 1,
        "type_name": "UG",
        "hoprofile": 1
    },
    {
        "id": 1,
        "type_name": "PG",
        "hoprofile": 2
    }
  ],
  "hoprofile": [
    {
        "id": 1,
        "name": "silicon guy",
        "hpqualifications": [1]
    },
    {
        "id": 2,
        "name": "power star",
        "hpqualifications": [2]
    }
  ]
}

テンプレート:

各文字を入力するためにリクエストが API 側に送信され、返されたデータが選択ボックス オプション http://www.ember-power-select.com/に表示されます。 docs/custom-search-action

{{#each model.hpqualifications as |hpqualification|}}
  {{#power-select
    selected=hpqualification.hoprofile.name
    search=(action "hoProfile")
    onchange=(action (mut hpqualification.hoprofile.name))
    as |repo|
  }}
    {{repo.name}}
     {{/power-select}}
    {{/each}}
  {{/power-select}}
{{/each}}

コンポーネント:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    hoProfile(term){
      if (Ember.isBlank(term)) { return []; }

      const url = `//localhost:3000/betaweb/filters/hoprofiles?  name=${term}`;
      return Ember.$.ajax({ url }).then(json => json.hoprofiles);
    }
  }
});

電源選択アクションで返されるデータ:

{
  "hoprofiles": [{
    "id": 7,
    "name": "silicon guy"
  }, {
    "id": 14,
    "name": "power star"
  }]
}

すべてが正常に機能しています。しかし、ember-power-select では、事前に選択された値が選択されません。検索パラメータを入力する前の選択ボックスは空白です。通常、以下のコードを使用すると、値が表示されます

{{#each model.hpqualifications as |hpqualification|}}
 <label>HO Profile Name<label>
 <li> {{input value=hpqualification.hoprofile.name}} </li>
{{/each}}

API 側から返されるすべてのデータが表示されます。

HO Profile Name
- silicon guy
- power star

しかし、ember-power-select を使用すると、選択ボックスでデータが事前に選択されません。私は多くの方法を試しましたが、うまくいきませんでした。power-select を使用してこれを行うための解決策または別の方法を教えてください。

4

1 に答える 1