ember.js - 在 Ember 2.0 中创建原始 html 组件

Question

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

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

用法：

{{#raw-output}}
  <div>test</div>
{{/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>'}}

组件/原始输出.hbs：

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

你不需要使用yield. 使用普通属性，如model.

• 工作演示。
• 演示背后的完整代码。

Answer 2

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

工作示例：Twiddle

Answer 3

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

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

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

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