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

如果您自己在模板中编写代码，最直接的方法是逃避把手，如下所示：

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

我没有办法在你的模板中做到这一点，因为把手不关心HTMl标签，并会跳过它并阅读把手代码。唯一可行的方法是将代码作为字符串变量放置，并使用把手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>';
}),

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

2 个答案: