0

コードをhtmlまたはcssとして表示するデザインガイドを作成しようとしています。

私の理解では、{{yield}} を使用してコードを以下のように表示できるため、コンポーネントを作成する必要があるということです。

使用法：

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

コンポーネント/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}}
4

3 に答える 3

1

おっしゃる通りの使い方ができます。コンポーネントのdidInsertElementで、コード行を取得しescape、エスケープされた行を表示します。

作業例：ひねり

于 2015-09-09T17:34:21.870 に答える