要求 Hogan 以及如何从 JSON 呈现 html 实体答案

【问题标题】：Require with Hogan and how to render html entity from JSON要求 Hogan 以及如何从 JSON 呈现 html 实体
【发布时间】：2012-12-10 11:58:10
【问题描述】：

我在模板中使用 Hogan js，并且需要 js 作为模块加载器。准备好jquery js、hogan js、require js等必要的库。

index.html 在下面

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>RequireJS - AMD</title>
    <script data-main="main" src="require.js"></script>

    <!-- Template -->
    <script id="tmpl-heading" type="text">
        <h3>{{heading}}</h3>
        <p>{{article}}</p>
    </script>
</head>
<body>
</head>
<body>
    <div id="heading"></div>
</body>
</html>

下面是主要的js，

require(['jquery', 'hogan'], function($, hogan){
        var headingData = {
            heading: "Some heading goes here",
            article: "<a href='http://www.lipsum.com'>Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec varius, velit pulvinar sollicitudin auctor, nibh nibh mattis diam, vel elementum tortor urna ac diam. Sed tellus neque, gravida nec facilisis et, pellentesque quis enim."
        };

        var hSource = $("#tmpl-heading").html();

        var hTemplate = Hogan.compile(hSource);

        var hData = hTemplate.render(headingData);

        $("#heading").html(hData);

        //$("#heading").html(headingData.article);
});

我的问题：在浏览器上，锚标记中的文本未呈现为链接并呈现为文本。

但是，如果我不使用 hogan 等类似下面的内容，则结果符合预期。链接正确呈现。

require(['jquery', 'hogan'], function($, hogan){
        var headingData = {
            heading: "Some heading goes here",
            article: "<a href='http://www.lipsum.com'>Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec varius, velit pulvinar sollicitudin auctor, nibh nibh mattis diam, vel elementum tortor urna ac diam. Sed tellus neque, gravida nec facilisis et, pellentesque quis enim."
        };

       $("#heading").html(headingData.article);
});

请指出我在使用 Hogan 时需要进行的必要更改（我确定我一定错过了一些重要的部分，但无法弄清楚），我应该能够在前端呈现锚点作为链接。提前致谢。

【问题讨论】：

对您希望呈现为 html 的部分使用三重胡须。在您的情况下，它将是 <p>{{{article}}}</p> 而不是 <p>{{article}}</p>。
哇，谢谢 N.B.我完全忘记了 Mustache 这个简单的解决方案。
没问题，和霍根一起玩吧:)

标签： json requirejs hogan.js

【解决方案1】：

如果要输出 html，请使用三重花括号。 {{{html}}}

来自文档：

默认情况下，所有变量都是 HTML 转义的。如果要呈现未转义的 HTML，请使用三重胡须：{{{name}}}。

您还可以使用 & 取消转义特定变量。

https://github.com/janl/mustache.js/

【讨论】：