Wie benutze ich ember-power-select in {{#each}} block

Question

Ich erzeuge ember-power-select box mit {{#each}} block in hbs template wie im folgenden Code gezeigt.

{{#each hps as |hp|}} 

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

{{/each}} 

Der obige Code generiert zwei Auswahlfelder. Aber wenn ich einen Wert in der ersten Box auswähle, wird der gleiche Wert auch in der zweiten Box repliziert.

Wie unterscheiden sich die beiden Auswahlfelder?

Answer 1

Das einzige, was ich kann Arbeit, die denken kann, ist selected als ein Array deklarieren und binden jede Macht selected Eigentum an den korrespondierenden Index des hp Array auswählen.

Zum Beispiel, vorausgesetzt, Sie eine Komponente verwenden:

import Ember from 'ember'; 

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

Dann in Ihrer Komponente Vorlage:

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

Dies ist vor allem geschieht von da Sie von gleichen as |repo| in beiden zuweisen die Select-Anweisungen, also wenn Sie eine ändern, spiegelt sich in beiden wider.
{{#power-select}} haben keine Option wie diese Sie besser versuchen, mit einigen anderen
oder
sonst definieren Sie zwei {{#power-select}} mit verschiedenen as |repo2|

Answer 3

Dies funktioniert für mich scheinen

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