對Hogan的要求以及如何從JSON呈現html實體

我對我的模板使用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); 
});

請點我朝進行必要的修改，需要同時使用霍根做（我敢肯定，我一定是錯過了一些重要的一點卻無法弄清楚），我應該能夠上呈現前端錨作爲鏈接。提前致謝。

來源

2012-12-10 radiant

對於希望呈現爲html的部分使用三重鬍鬚。在你的情況下，它將是'

{{article}}}

'而不是'

'。 –

哇，謝謝N.B.我完全忘記了Mustache的這個簡單解決方案。 – radiant

沒問題，跟霍根玩吧:) –

如果要輸出html，請使用三角花括號。 {{{HTML}}}

從文檔：

所有變量都默認HTML轉義。如果您想呈現未轉義的HTML，請使用三重鬍鬚：{{{name}}}。

您還可以使用&來隱藏特定變量。

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

來源

2015-07-03 06:16:13 Maralc

對Hogan的要求以及如何從JSON呈現html實體

回答

相關問題