Question

我想使用把手在无序列表中显示一系列数据，分为＆＃34; title＆＃34;和＃34;文章。＆＃34;但是，有些文章会包含不同的HTML标记，无论是<a>标记用于链接。如果您查看下面的代码，当数据附加到DOM时，而不是显示类似的链接，您可以在这里阅读更多相关信息，它说明了实际的HTML锚标记。有没有人知道解决这个问题？

<div id="myDiv"></div>

考虑以下模板：

<script id="my-template" type="text/x-handlebars-template">
    <div style='margin: 20px'>
        <ul style='list-style-type: none; width:500px'>
            <h4 style='padding:10px; overflow: auto'>General Credit</h4>
            {{#each this}}
            <li style='padding:10px; overflow: auto'>
                <h3>{{title}}</h3>
                <p>{{article}}</p>
            </li>
            {{/each}}

        </ul>
    </div>

</script>

我的javascript看起来像这样：

//Data for Articles
var articleData = [
{
    title: "My title here",
    article: "You can learn more about it <a href='https://www.google.com'>here</a>"
}
];

//Get Template From Script Tag
var source1 = $("#my-template").html();
//Compile Template
var template1 = Handlebars.compile(source1);
$("#myDiv").append(template1(articleData));

Answer 1

你应该使用三个花括号：

<li style='padding:10px; overflow: auto'>
    <h3>{{{title}}}</h3>
    <p>{{{article}}}</p>
</li>

因此，把手不会转义字符串中的HTML代码。

Here参考。

干杯

Answer 2

您可以使用三重括号来转义html。试试{{{article}}}

Answer 3

简单的你{} {}辅助调用是一个简单的标识符，后跟零个或多个参数（用空格分隔）。每个参数都是Handlebars表达式。 {{{link story}}} 在这种情况下，link是Handlebars助手的名称，story是助手的参数。把手以与“基本用法”中描述的完全相同的方式评估参数。

Answer 4

仔细阅读文档。只需在我的模板中围绕文章放置{{{}}}而不是{{}}，现在HTML代码就可以正常呈现。

把手文档：http://handlebarsjs.com/expressions.html

Handlebars JS：在数据中包含<li>，<br/>和其他HTML标签

4 个答案: