Menu
I am using Hogan js for my template and require js as a module loader. Have the necessary libraries such as jquery js, hogan js, require js in place.
index.html is 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 is 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 issue: on the browser the text within the anchor tag is not rendered as link and rendered as text.
however, if I don't use hogan and so something like below, the result is as expected. Link is rendered 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 point me towards the necessary changes needs to be done while using Hogan (I'm sure i must have missed some important bit however unable to figure out) and i should be able to render anchor on front end as link. Thanks in advance.
663
Use tripple curly braces if you want to output html. {{{html}}}
from the docs:
All variables are HTML-escaped by default. If you want to render unescaped HTML, use the triple mustache: {{{name}}}.
You can also use & to unescape a specific variable.
https://github.com/janl/mustache.js/
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
