在 hbs 模板中的屏幕上显示车把代码

Question

我想知道是否有一种方法可以在像这样的车把模板中在屏幕上呈现车把代码：

<code>
  {{#mx-tab id="basic-usage" value="Basic usage"}}
    {{#mx-tabs selectedTab="tab1" class="tab-margin"}}
        {{#mx-tab id="tab1" value="Tab 1"}}Tab content 1{{/mx-tab}}
        {{#mx-tab id="tab2" value="Tab 2"}}Tab content 2{{/mx-tab}}
        {{#mx-tab id="tab3" value="Tab 3"}}Tab content 3{{/mx-tab}}
    {{/mx-tabs}}
  {{/mx-tab}}
</code>

Answer 1

我不认为有一种方法可以在您的模板中执行此操作，因为 handlebars 不关心 HTMl 标签并且会跳过它并阅读 handlebars 代码。我能做的唯一可能的方法是将您的代码作为字符串变量并使用把手 HTML ESCAPING 将其吐到您的模板中。

{{{code}}}

code: Ember.computed(function(){
  return'<code> {{#mx-tab id="basic-usage" value="Basic usage"}}<br/> &nbsp &nbsp &nbsp{{#mx-tabs selectedTab="tab1" class="tab-margin"}}<br/> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp{{#mx-tab id="tab1" value="Tab 1"}}Tab content 1{{/mx-tab}}<br/> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp{{#mx-tab id="tab2" value="Tab 2"}}Tab content 2{{/mx-tab}}<br/> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp{{#mx-tab id="tab3" value="Tab 3"}}Tab content 3{{/mx-tab}}<br/> &nbsp &nbsp &nbsp{{/mx-tabs}}<br/> {{/mx-tab}}</code>';
}),

Answer 2

如果你自己在模板中编写代码，最直接的方法是转义句柄，如下所示：

 <code>
   \{{#mx-tab id="basic-usage" value="Basic usage"}}
     \{{#mx-tabs selectedTab="tab1" class="tab-margin"}}
       \{{#mx-tab id="tab1" value="Tab 1"}}Tab content 1\{{/mx-tab}}
       \{{#mx-tab id="tab2" value="Tab 2"}}Tab content 2\{{/mx-tab}}
       \{{#mx-tab id="tab3" value="Tab 3"}}Tab content 3\{{/mx-tab}}
     \{{/mx-tabs}}
   \{{/mx-tab}}
 </code>

在 hbs 模板中的屏幕上显示车把代码

Displaying handlebars code on screen in a hbs template

handlebars.js

ember.js