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

Question

在输入搜索参数之前，“selected”属性中必须设置一个值。谁能帮我解决这个问题？#ember-power-select

通过在 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]
    }
  ]
}

模板：

使用了 ember-power-select custom-search-action，请求将被发送到 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 属性。 来自文档：

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

只需确保您传递给选项的列表的格式也与搜索结果相同，换句话说就是具有“名称”属性的对象数组。

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