Визуализация компонента с помощью concat helper

Question

Визуализация компонента с помощью concat helper

1

Есть ли способ визуализации компонента в 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, но это делает код уродливым. Поэтому я хочу знать, есть ли способ упростить это...

Alexander Koltunov 08 июнь 2017, в 21:05

Источник

Теги:

javascript

ember.js

htmlbars

1 ответ

Ещё вопросы

nem035 · Answer 1 · 2017-06-08T16-43-00.000Z

Насколько я знаю, это действительно невозможно. Даже если это некорректно, передача предварительно обработанного компонента просто кажется взломанным.

Правильный подход для этого состоит в том, чтобы иметь {{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"}}

Я просто работаю над приготовлением твида. Вот оно Совершенно те же идеи с вами!