Создание необработанного HTML-компонента в Ember 2.0

Question

Я пытаюсь сделать руководство по дизайну, где я показываю код в виде HTML или CSS.

Насколько я понимаю, я должен делать компонент, потому что я могу использовать {{yield}}, чтобы код отображался, как показано ниже.

Использование:

{{#raw-output}}
  <div>test</div>
{{/raw-output}}

компоненты / сырье-output.hbs:

<pre>
<code>
    {{{yield}}}
</code>
</pre>

Моя единственная проблема заключается в том, что я не могу понять, как выводить необработанный код в HtmlBars.

РЕДАКТИРОВАТЬ: конечный продукт

//raw-output.js
import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement: function () {
        var $element = $(this.get('element')), 
        $code = $("code", $element), 
        html = $code.html();
        $code.empty().text(html);
    }
 });

//raw-output.hbs

<code>
    {{{yield}}}
</code>


//usage
{{#raw-output}}
    <div>name</div> 
{{/raw-output}}

Answer 1

Вы можете использовать его так же, как вы упомянули. в didInsertElement вашего компонента, получить строки кода, escape их, а затем показать сбежавшие линии.

Рабочий пример: Twiddle

Answer 2

Использование:

{{raw-output model='<div style="background: red">test</div>'}}

компоненты / сырье-output.hbs:

<pre>
<code>
    {{model}}
</code>
</pre>

Вам не нужно использовать yield, Используйте обычное свойство, как model,

• Рабочая демка.
• Полный код демонстрации.

Answer 3

Как вариант попробуйте дополнение https://github.com/ef4/ember-code-snippet.

Это компонент Ember (и дополнение ember-cli), который позволяет вам отображать фрагменты кода в вашем приложении. Фрагменты кода могут жить в своих собственных выделенных файлах, или вы можете извлекать блоки кода из самого приложения. Особенности:

• подсветка синтаксиса.
• Автоматическая перезагрузка ember-cli примет изменения в любом из файлов сниппета.
• Компонент использует расширения файлов, чтобы помочь highlight.js угадать правильный язык.

Например, этот аддон используется в демонстрационной таблице addepar/ember-table.