5

我正在为我的模板使用 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 时需要进行的必要更改（我确定我一定错过了一些重要的部分，但无法弄清楚），我应该能够将前端的锚点呈现为链接。提前致谢。

4

1 回答 1

7

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

来自文档：

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

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

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

于 2015-07-03T06:16:13.207 回答