Render-Komponente mit Concat-Helfer

Question

Gibt es eine Möglichkeit, Komponente in HTMLBars als Argument übergeben in Concat-Helfer übergeben? Ich habe fa-icon Glut-Komponente und meine benutzerdefinierte Komponente, die Etikett anzeigt. Ich brauche es angezeigt wie:

{{my-simple-button label=(concat (fa-icon "pencil") " " (t "myAwesomeTranslate"))}} 

aber offensichtlich fa-icon eine Komponente ist kein Helfer.

Aktualisierung. Danke! Tatsächlich verwende ich ember-async-button mit benutzerdefinierten Nachrichten, und deshalb habe ich so etwas wie

{{#async-button as |component state|}} 
    {{#if state.isPending}} 
    {{if pendingLabel pendingLabel (t 'site.actions.pending')}} 
    {{else if state.isDefault}} 
    {{label}} 
    {{else if state.isRejected}} 
    {{label}} 
    {{else if state.isFulfilled}} 
    {{label}} 
    {{/if}} 
{{/async-button}} 

schreiben Deshalb möchte ich einen Wrapper wie my-simple-button die label und pendingLabel und versteckt jene ifs nimmt. Also kann ich Block nicht benutzen, weil ich Icons an 4 Stellen einrichten muss. Die einzige Option, die ich sehe, ist die Verwendung von ifs für icon und pendingIcon Eigenschaften, aber das macht Code hässlich. So grundlegend möchte ich wissen, ob es eine Möglichkeit gibt, dies zu vereinfachen ...

Answer 1

Soweit ich weiß, ist das nicht wirklich möglich. Auch wenn es auf eine obskure Art und Weise ist, scheint die Weitergabe einer vorgerenderten Komponente einfach hacky zu sein.

Der richtige Ansatz dafür ist ein {{yield}} als Teil Ihres Labels, das ein eingebauter Mechanismus in Ember ist, um Komponenten von externen Bereich zu rendern.

// inside templates/components/my-simple-button.hbs 
{{yield}} {{label}} 

Dann können Sie einfach fa-icon als Kind my-simple-button passieren:

{{#my-simple-button label="myAwesomeTranslate"}} 
    {{fa-icon "pencil"}} 
{{/my-simple-button}} 

Und es wäre {{fa-icon "pencil"}} statt {{yield}} machen.

Wenn Sie my-simple-button wollen Icons speziell unterstützen, könnten Sie eine icon Eigenschaft enthalten und verwenden fa-icon statt yield:

// inside templates/components/my-simple-button.hbs 
{{#if icon}}{{fa-icon icon}}{{/if}} {{label}} 

und geben es gerne:

{{my-simple-button label="myAwesomeTranslate" icon="pencil"}}