ember.js - 如何在 {{#each}} 块中使用 ember-power-select

Question

我正在使用 hbs 模板中的 {{#each}} 块生成 ember-power-select 框，如下面的代码所示。

{{#each hps as |hp|}}

{{#power-select
  search=(action "searchRepo")
  selected=selected
  onchange=(action (mut selected))
  as |repo|
}}
  {{repo.name}}
{{/power-select}}

{{/each}}

上面的代码生成了两个选择框。但是当我在第一个框中选择一个值时，第二个框中也会复制相同的值。

区分两个选择框的方法是什么？

Answer 1

这对我有用

// Controller
roles: ['Project Manager', 'Tech Lead', 'Member'],

<ul>
{{#each user.projectRoles as |projectRole|}}
    <li>
        <label>{{projectRole.project}}</label>
        {{#power-select selected=projectRole.role options=roles onchange=(action (mut projectRole.role)) as |role|}}
        {{role}}
        {{/power-select}}
    </li>
{{/each}}
</ul>

Answer 2

这主要是因为您as |repo|在两个 select 语句中都分配了相同的值，因此每当您更改一个语句时，它都会反映在两个语句中。
{{#power-select}}没有这样的选项更好，您尝试使用其他选项，
否则
您定义两个{{#power-select}}不同的as |repo2|

Answer 3

我能想到的唯一可行的方法是声明selected为数组并将每个电源选择selected属性绑定到数组的对应索引hp。

例如，假设您正在使用一个组件：

import Ember from 'ember';

export default Ember.Component.extend({
    selected: Ember.A()
});

然后，在您的组件模板中：

{{#each hps as |hp hp_index|}}

    {{#power-select
      search=(action "searchRepo")
      selected=selected.[hp_index]
      onchange=(action (mut selected))
      as |repo|
    }}
      {{repo.name}}
    {{/power-select}}

{{/each}}