不能在 {{#each}} 块中使用 `ember-power-select`

Question

//controller
categories: ['category0', 'category1', 'category2'],
units: ['unit0', 'unit1', 'unit3'],

//hbs
<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=selected
        onchange=(action (mut selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

以上代码生成了 3 个 power-select 框。当我 select 1st power-select 框中的值时，相同的值也会在第二和第三框中得到 selected。

有 3 个类别，因此它加载了三个 power-select 盒子。所有 3 个 power-select 选项都属于同一个数组（单位：['unit0'、'unit1'、'unit3']）。

有什么方法可以让每个power-select盒子都独一无二？这样我就可以在每个 power-select 框中 select 不同的值。

Answer 1

您需要将 selectedItem 属性发送到 ember-power-select，目前您正在发送每个块范围 unit 属性.

我修改了您的代码以包含 selected

Units: [{name:'Unit0',selected:''},{name:'Unit1',selected:''},{name:'Unit2',selected:''}]

在哈佛大学，

<ul>
  {{#each Units as |unit|}}
    <li>
      <label>Select Unit</label>
      {{#power-select
        selected=unit.selected
        options=Units 
        onchange=(action (mut unit.selected)) 
        as |unit|
      }}
        {{unit.name}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

这是working twiddle

Answer 2

以下解决方案有效

categories: [{label: 'category0'}, {label: 'category1'}, {label: 'category2'}
],
units: ['unit0', 'unit1', 'unit3']

<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=category.selected
        onchange=(action (mut category.selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

working twiddle

不能在 {{#each}} 块中使用 `ember-power-select`

Cannot use `ember-power-select` in {{#each}} block

javascript

jquery

ember.js

ember-data

ember-cli

以下解决方案有效