在 Ember 2.0 中创建原始 html 组件答案

【问题标题】：Creating a raw html component in Ember 2.0在 Ember 2.0 中创建原始 html 组件
【发布时间】：2015-12-05 11:06:06
【问题描述】：

我正在尝试制作一个设计指南，将代码显示为 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}}

【问题讨论】：

标签： ember.js htmlbars

【解决方案1】：

用法：

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

组件/原始输出.hbs：

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

您不需要使用yield。使用像model这样的普通属性。

【讨论】：

【解决方案2】：

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

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

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

比如这个插件用在addepar/ember-table demo.

【讨论】：

【解决方案3】：

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

工作示例：Twiddle

【讨论】：