How to use ember-power-select in {{#each}} block

Question

I am generating ember-power-select box using {{#each}} block in hbs template as shown in the code below.

{{#each hps as |hp|}}

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

{{/each}}

The above code generates two select boxes. But when I select a value in the first box,the same value gets replicated in the second box too.

What is the way to differentiate the two select boxes?

score 3 · Answer 1 · answered May 29 '16 at 08:09

This works for me

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

score 0 · Answer 2 · answered May 28 '16 at 18:22

0

The only thing I can think of that may work is declaring selected as an array and bind every power select selected property to the correspondent index of the hp array.

For example, assuming you're using a component:

import Ember from 'ember';

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

Then, in your component template:

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

answered May 28 '16 at 18:22

Terseus

2,082
15
22

This doesn't seem to work. The value is not getting selected from the drop down. – rinold simon May 30 '16 at 08:04
how to set index for this type? http://stackoverflow.com/questions/37656662/ember-power-select-changing-the-value-in-one-power-select-box-it-alternately @terseus – rinold simon Jun 06 '16 at 17:20

score 0 · Answer 3 · answered May 28 '16 at 19:13

This is mainly happening of because you are assigning same as |repo| in both of the select statements so whenever you change one it is reflecting in the both.
{{#power-select}}do not have option like this better you try with some other one
or
else you define two {{#power-select}} with different as |repo2|

How to use ember-power-select in {{#each}} block

3 Answers3