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

Question

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

它通过在 js 中为 "destination" 设置值并将 "destination" 分配给 "selected" 来处理正常的操作。看看这里的例子 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-selectcustom-search-action，请求将发送到API端输入每个字母，返回的数据将显示在select 框选项 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);
    }
  }
});

电源返回的数据-select 操作：

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

一切正常。但是在 ember-power-select 中，preselected 值没有得到 selected。在输入搜索参数之前，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 时，数据没有在 select 框中预先 selected。我尝试了很多方法，但没有解决我的问题。谁能给我一个解决方案或替代方法来使用 power-select ?

Answer 1

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

"You can provide both options and a search action. Those options will be the initial set of options, but as soon as the user performs a search, the results of that search will be displayed instead."

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

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

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

#ember-power-select, How to set a preselected value in ember-power-select custom-search action

ember.js

ember-data

ember-cli

ember-cli-addons

我的代码：

型号：

路线：

来自API方的数据：

模板：

组件：

电源返回的数据-select 操作：