concatヘルパーのレンダリングコンポーネント

Question

concatヘルパーで渡される引数としてHTMLBarsのコンポーネントをレンダリングする方法はありますか？ 私はfa-icon emberコンポーネントとラベルを表示する私のカスタムコンポーネントを持っています。 fa-iconがコンポーネントではないヘルパーです、明らかに

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

しかし、私は次のようにそれを表示する必要があります。 ありがとう！実際、私は、カスタムメッセージをember-async-buttonを使用するので、私は、だから私はlabelとpendingLabelを取り、それらのifsを隠しmy-simple-buttonのようなラッパーをしたい

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

のようなものを記述する必要があります。だから私は4つの場所にアイコンを設定する必要があるので私はブロックを使用することはできません。私が見る唯一のオプションは、iconとpendingIconプロパティのifsを使用していますが、それはコードを醜いものにします。だから、基本的に私は、これを単純化する方法があるかどうかを知りたがっています...

Answer 1

私が知る限り、それは本当に可能ではありません。たとえそれがあいまいな方法であっても、あらかじめレンダリングされたコンポーネントを渡すだけではハッキリに見えます。

このための適切なアプローチは、外部スコープからコンポーネントをレンダリングするエンバーにおける組み込みのメカニズムである、あなたのラベルの一部として{{yield}}を持つことです。

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

をそして、それは{{fa-icon "pencil"}}代わりの{{yield}}をレンダリングします：

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

次に、あなただけのmy-simple-buttonの子としてfa-iconを渡すことができます。

あなたはmy-simple-buttonは、特にアイコンをサポートしたい場合は、あなたがiconプロパティを含めるとyieldの代わりにfa-iconを使用することもできます。

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

などにそれを渡す：あなたはより多くのコンテキストを与える必要が

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