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

Posted 2023-02-26

【中文标题】Handlebars JS：在数据中包含 <li>、<br> 和其他 HTML 标签

【英文标题】：Handlebars JS: Including <li>, <br>, and other HTML tags in data

【发布时间】：2016-09-29 14:45:08

【问题描述】：

我想使用把手在无序列表中显示一系列数据，分为“标题”和“文章”。但是，有些文章会包含不同的 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));

【问题讨论】：

为什么你有一个h4作为一个ul的孩子？

【参考方案1】：

你应该使用三重花括号：

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

这样车把就不会转义字符串中的 HTML 代码。

Here 参考。

干杯

【参考方案2】：

您可以使用三方括号来转义 html。 试试 article

【参考方案3】：

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

【参考方案4】：

更仔细地重新阅读文档。只需在我的模板中的文章周围放置 而不是 ，HTML 标记现在就可以正常呈现了。

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

【讨论】：

还要注意标题标签是<ul>的无效子标签