在Ember 2.0中創建一個原始的html組件

Question

我試圖做一個設計指南，我將代碼顯示爲html或css。

我的理解是我應該製作一個組件，因爲我可以使用{{yield}}讓代碼顯示如下。

用法：

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

組件/原材料-output.hbs：

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

我唯一的問題是，我無法弄清楚^ h在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。

• Working demo.
• Full code behind demo.

Answer 3

作爲一個選項嘗試ember-code-snippet插件。

這是一個Ember組件（和ember-cli插件），可讓您在應用程序中呈現代碼片段。代碼片段可以存放在自己的專用文件中，也可以從應用程序本身提取代碼塊。特徵：

• 語法高亮顯示。
• ember-cli的自動重裝將會對任何片段文件進行更改。
• 該組件使用文件擴展名來幫助highlight.js猜測正確的語言。

例如，該插件用於addepar/ember-table demo。