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}}

上記のコードは、2 つの選択ボックスを生成します。しかし、最初のボックスで値を選択すると、同じ値が 2 番目のボックスにも複製されます。

2 つの選択ボックスを区別する方法は何ですか?

Answer 1

私が考えることができる唯一のことは、配列として宣言し、すべてのパワー選択プロパティを配列の対応するインデックスにselectedバインドすることです。selectedhp

たとえば、コンポーネントを使用しているとします。

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}}