Question

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

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

用法：

＆＃13;

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

＆＃13;

组件/原始output.hbs：

＆＃13;

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

＆＃13;

我唯一的问题是我无法弄清楚如何在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>'}}

组件/原始output.hbs：

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

您无需使用yield。使用model等常规属性。

Answer 2

作为选项，请尝试ember-code-snippet插件。

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

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

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

在Ember 2.0中创建原始html组件

2 个答案: