Dynamisch generieren Komponenten basierend auf Array von Objekten

Question

In Ordnung, ich bin ziemlich neu in Ember (und Frameworks gleichermaßen) also vergib mir, wenn ich etwas offensichtlich vermisse.

Ich habe eine Einstellungsmenü-Komponente, die einige Logik enthält. Ein Teil dieser Logik ist eine berechnete Eigenschaft, die ein Array von Objekten zurückgibt (mögliche Einstellungen). Diese Daten werden an eine Ansichtskomponente übergeben.

Menü-component.js

possibleSettings: computed(function() { 
    // Example of returned data 
    return [ 
     { 
      type: 'time', 
      min: 1, 
      max: 60, 
     }, 
     }, 
      type: 'sound', 
      values: [‘alarm’, ‘beep’, ‘rooster’], 
     }, 
    ] 
}); 

Menü-component.hbs

{{menu-component/menu-view 
    possibleSettings=possibleSettings}} 

Jede Einstellung hat eine eigene Komponente, zum Beispiel:

Menü-Komponente /time.hbs

<label>Time</label> 
{{input value=time}} 

Menü-Komponente/sound.hbs

<label>Sound</label> 
{{dropdown items=sounds}} 

Ich möchte die Ansicht Komponente, diese Komponenten zu machen, basierend auf dem Ergebnis von possibleSettings. Wenn Sie also den obigen Beispieldaten folgen, müssen Sie sowohl die Komponente Time als auch die Komponente Sound wiedergeben.

Ich denke, ich brauche so etwas, aber ich kann meinen Kopf nicht um das letzte Stück wickeln. Ich könnte einen neuen Blick auf die Dinge werfen.

Menü-Komponente/settings-view.hbs

<div> 
    {{#each possibleSettings as |setting|}} 
     {{#if (eq setting.type time)}} 
      {{component ‘menu-component/time'}} 
     {{else if (eq setting.type sound)}} 
      {{component ‘menu-component/sound'}} 
     {{/if}} 
    {{/each}} 
</div> 

Jede Hilfe ist sehr geschätzt.

Answer 1

Es scheint, das Problem ist, dass Sie nicht time in Anführungszeichen in den Lenker wickeln, es ist so eine Unterkunft suchen "time"time am Bauteil selbst, statt der Zeichenfolge mit dem Namen. Außerdem glaube ich nicht, dass Sie hier den Komponentenhelfer verwenden müssen, da Sie den Komponentennamen ohnehin fest codieren. Hier ist Ihre hbs in dieser Hinsicht bearbeitet

<div> 
    {{#each possibleSettings as |setting|}} 
    {{#if (eq setting.type "time")}} 
     {{menu-component/time}} 
    {{else if (eq setting.type "sound")}} 
     {{menu-component/sound}} 
    {{/if}} 
    {{/each}} 
</div> 

Alternativ Sie so etwas tun könnte:

{{#each possibleSettings as |setting|}} 
    {{component (concat 'menu-component/' setting.type)}} 
{{/each}}