如何在{{#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

我能想到的唯一可行的方法是将selected声明为一个数组，并将每个power select 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}}

Answer 3

这主要是因为您在两个select语句中都分配了相同的as |repo|，所以每当您更改其中一个语句时，它都会反映在这两个语句中。

{{#power-select}}没有这样的选项，你可以试试其他的

或

否则，您将使用不同的as |repo2|定义两个{{#power-select}}