在 Ember 2.0 中创建原始 html 组件

Question

我正在尝试制作一个设计指南，其中我将代码显示为 html 或 css。

我的理解是我应该制作一个组件，因为我可以使用 {{yield}} 让代码像下面这样显示。

用法：

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

components/raw-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

用法：

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

components/raw-output.hbs:

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

您不需要使用 yield。使用正常的属性如 model.

Answer 2

作为一个选项尝试 ember-code-snippet 插件。

这是一个 Ember 组件（和 ember-cli 插件），可让您在应用中呈现代码片段。代码片段可以存在于它们自己的专用文件中，或者您可以从应用程序本身中提取代码块。特点：

语法高亮显示。
ember-cli 的自动重新加载将获取对任何代码段文件的更改。
该组件使用文件扩展名来帮助highlight.js猜测正确的语言。

例如，此插件用于 addepar/ember-table demo。

Answer 3

您可以按照您提到的方式使用它。在组件的 didInsertElement 中，获取代码行，escape 然后显示转义行。

工作示例：Twiddle

在 Ember 2.0 中创建原始 html 组件

Creating a raw html component in Ember 2.0

ember.js

htmlbars