Wie eine Komponente zu verwenden, aus einer Komponente in Ember

Question

G'day alle,

Ich versuche, eine Komponente mit einem anderen zu wickeln eine vereinfachte Bearbeitung Wrapper zur Verfügung zu stellen.

Die Komponente soll entweder eine Bezeichnung oder eine Auswahlkomponente anzeigen, die es dem Benutzer ermöglicht, den richtigen Wert auszuwählen.

Ich will die Macht-select-Komponente wickeln, und geben sie Werte bis zum Subkomponente ist, so dass die Seitenvorlage Komponentenverweis wie folgt aussieht:

{{cm-select 
    title="Country ##" 
    options=countries 
    selected=selectedCountry 
    searchField="name" 
    action="selectCountry" 
}} 

„Länder“ ist ein Array von Land Objekte, und selectedCountry ist eines dieser Länderobjekte.

Die Komponente Vorlage hat die folgende:

<td>{{title}}</td> 
<td> 
    {{#if edit}} 
    {{#power-select 
     options=options 
     selected=selected 
     searchField=searchField 
     as |object|}} 
     {{object.name}} 
    {{/power-select}} 
    {{else}} 
     <small>{{modelElement}}</small> 
    {{/if}} 
</td> 

Leider ist die Power-select-Komponente macht mit einer leeren Liste von Optionen.

Ich dachte, das Einpacken dieser Parameter in den Lenker könnte den Trick machen, aber es scheint, dass Lenker im Lenker keine gültige Syntax ist.

Hat jemand irgendwelche Ideen?

Danke,

Andy

Answer 1

, die funktionieren sollte, habe ich eine twiddle für Sie, Ihren Anwendungsfall zu demonstrieren. Sie werden sehen, mir die Ihre cm-select Vorlage dieses Update:

{{title}} | 
<button {{action 'toggleEdit'}}>Toggle Edit</button> 
<br/> 
{{#if edit}} 
    Search for a Item via {{searchField}} 
    <br/> 
    {{power-select 
    options=options 
    selected=selected 
    searchField=searchField 
    onSelect=(action "itemSelected") 
    }} 
{{else}} 
    {{search-list 
    options=options 
    searchField=searchField 
    onSelect=(action "itemSelected") 
    }} 
{{/if}} 

Wo Sie Optionen iteriert für Power-Select in cm-Komponente auswählen, zog ich, dass in die Stromauswahl Vorlage nach unten. Es ist besser zu versuchen, einige Funktionen dort einzukapseln, anstatt alles in cm-select zu haben. Ich war nicht sicher, was Sie mit {{modelElement}} im Sinn hatten, also demonstriere ich einfach, wie es aussehen würde, indem ich zwei verschiedene Komponenten in cm-select verwende.