2012-12-10 32 views
4

我对我的模板使用Hogan js,并要求将js作为模块加载器。有必要的图书馆,如jquery js,hogan js,需要js到位。对Hogan的要求以及如何从JSON呈现html实体

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

请点我朝进行必要的修改,需要同时使用霍根做(我敢肯定,我一定是错过了一些重要的一点却无法弄清楚),我应该能够上呈现前端锚作为链接。提前致谢。

+8

对于希望呈现为html的部分使用三重胡须。在你的情况下,它将是'

{{article}}}

'而不是'

{{article}}

'。 –

+0

哇,谢谢N.B.我完全忘记了Mustache的这个简单解决方案。 – radiant

+0

没问题,跟霍根玩吧:) –

回答

5

如果要输出html,请使用三角花括号。 {{{HTML}}}

从文档:

所有变量都默认HTML转义。如果您想呈现未转义的HTML,请使用三重胡须:{{{name}}}。

您还可以使用&来隐藏特定变量。

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