＃ember-power-select，如何在ember-power-select自定义搜索操作中设置预选值

Question

必须在＆＃34;选择＆＃34;中设置值。在输入搜索参数之前输入属性＆＃34;。任何人都可以帮我解决这个问题吗？ ＃烬功率选

通过设置＆＃34; destination＆＃34;的值，正在处理正常的操作处理。在js和分配＆＃34;目的地＆＃34;选择＆＃34;选择＆＃34;。请看这里的例子http://www.ember-power-select.com/docs/action-handling。

但无法为自定义搜索操作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]
    }
  ]
}

模板：

使用ember-power-select自定义搜索操作，请求将被发送到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为我提供解决方案或替代方法吗？

Answer 1

对于预填充数据，您还需要指定options属性。 来自文档：

“您可以同时提供选项和搜索操作。这些选项将是初始选项集，但只要用户执行搜索，系统就会显示搜索结果。”

确保传递给选项的列表的格式与搜索结果的格式相同，换句话说，具有“name”属性的对象数组。

对于预先选择的对象，您选择的属性也需要是具有“name”属性的对象。在您的情况下selected=hpqualification.hoprofile。