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声明为数组并将每个幂select selected属性绑定到{{1的对应索引数组。

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

hp

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

import Ember from 'ember';

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

Answer 3

这主要是因为您在两个select语句中分配了相同的as |repo|，所以无论何时更改它都会反映在两者中。
{{#power-select}}没有更好的选择，你可以尝试使用其他的一个或
否则，您可以使用不同的{{#power-select}}

定义两个as |repo2|

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

3 个答案: