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

Question

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

我使用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>

Run Code Online (Sandbox Code Playgroud)

和主要的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);
});

Run Code Online (Sandbox Code Playgroud)

我的问题:在浏览器上,锚标记内的文本不会呈现为链接并呈现为文本.

但是,如果我不使用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);
});

Run Code Online (Sandbox Code Playgroud)

请指出我在使用Hogan时需要做的必要更改(我确定我必须错过一些重要的位但无法弄清楚)并且我应该能够在前端渲染锚点作为链接.提前致谢.

Answer 1

Mar*_*alc 6

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

来自文档:

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

您还可以使用&来取消特定变量.

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

归档时间：	13 年，8 月前
查看次数：	2773 次
最近记录：	11 年，1 月前