Есть ли способ визуализации компонента в HTMLBars в качестве аргумента, переданного в помощнике concat? У меня есть компонент fa-icon
ember и мой пользовательский компонент, который отображает ярлык. Мне нужно отобразить его так:
{{my-simple-button label=(concat (fa-icon "pencil") " " (t "myAwesomeTranslate"))}}
но, очевидно, fa-icon
- это компонент, а не помощник.
Обновить. Спасибо! На самом деле я использую ember-async-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}}
Поэтому я хочу, чтобы обертка была похожей на my-simple-button
которая берет label
и pendingLabel
и скрывает эти ifs
. Поэтому я не могу использовать блок, потому что мне нужно настроить значки в 4 местах. Единственный вариант, который я вижу, это использование ifs для свойств icon
и pendingIcon
, но это делает код уродливым. Поэтому я хочу знать, есть ли способ упростить это...
Насколько я знаю, это действительно невозможно. Даже если это некорректно, передача предварительно обработанного компонента просто кажется взломанным.
Правильный подход для этого состоит в том, чтобы иметь {{yield}}
как часть вашего ярлыка, который является встроенным механизмом в Ember для визуализации компонентов из внешней области.
// inside templates/components/my-simple-button.hbs
{{yield}} {{label}}
Затем вы можете просто передать fa-icon
в качестве дочернего элемента my-simple-button
:
{{#my-simple-button label="myAwesomeTranslate"}}
{{fa-icon "pencil"}}
{{/my-simple-button}}
И это сделает {{fa-icon "pencil"}}
вместо {{yield}}
.
Если вы хотите, чтобы my-simple-button
специально поддерживала значки, вы можете включить свойство icon
и использовать fa-icon
вместо yield
:
// inside templates/components/my-simple-button.hbs
{{#if icon}}{{fa-icon icon}}{{/if}} {{label}}
И передайте это как:
{{my-simple-button label="myAwesomeTranslate" icon="pencil"}}