Ember.js 在hbs模板的屏幕上显示把手代码

我想知道是否有一种方法可以在屏幕上的把手模板中呈现把手代码，如下所示：

<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>   

---

我不认为在模板中有什么方法可以做到这一点，因为Handlebar不关心

HTMl

标记，会跳过它并读取Handlebar代码。唯一可能的方法是将代码作为字符串变量，并使用handlebar

HTML转义将其放入模板

{{{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>';
}),

{{{code}}
代码：Ember.computed（函数（）{
返回“{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 id=“tab 2”tab content}

选项卡内容3{/mx选项卡}
{/mx选项卡}
；
}),
如果您自己在模板中编写代码，最简单的方法是避开把手，如下所示：

 <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>   

嗨@joseph cc，两个吹毛求疵的人。您不需要计算属性声明中的
'
，您现在应该更喜欢
Ember.computed
而不是
}.property
。谢谢，这正是我想要的