Question

我使用Hogan js作为我的模板，需要js作为模块加载器。有必要的库，如jquery js，hogan js，需要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时需要做的必要更改（我确定我一定错过了一些重要的位但无法弄清楚）并且我应该能够在前端渲染锚点作为链接。提前致谢。

Answer 1

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

来自文档：

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

你也可以使用＆amp;取消特定变量。

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

需要Hogan以及如何从JSON渲染html实体

1 个答案: