Geek Answers Handbook

Require from Hogan and how to render an html object from JSON

I use Hogan js for my template and require js as a module loader. They have the necessary libraries, such as jquery js, hogan js, require js in place.

index.html below

<!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>

and main js below

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

My problem: in the browser, the text in the anchor tag does not appear as a link and is displayed as text.

however, if I do not use hogan and something like below, the result will be as expected. The link is displayed correctly.

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

Please indicate to me the necessary changes that must be made when using Hogan (I am sure that I must have missed some important bit, but could not figure it out), and I would have to make the binding on the front side as a link. Thank you in advance.

+4
source share
1 answer

Use triplex braces if you want to output html. {{{HTML}}}

from documents:

By default, all variables are escaped HTML. If you want to display unshielded HTML, use a triple mustache: {{{name}}}.

You can also use to undo a specific variable.

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

+5
source

More articles:


All Articles