Jason Bourne Jason Bourne - 2 months ago 12
HTML Question

Handlebars JS: Including <li>, <br>, and other HTML tags in data

I want to use handlebars to display a series of data in an unordered list, split between "title" and "articles." However, some of the articles will contain different HTML tags, be it tags for link. If you take a look at my code below, when the data is appended to the DOM, rather than showing a link like 'You can read more about it here', it says the actual HTML anchor tags. Does anyone know a way around this?

<div id="myDiv"></div>


Consider the following template:

<script id="my-template" type="text/x-handlebars-template">
<div style='margin: 20px'>
<ul style='list-style-type: none; width:500px'>
<h4 style='padding:10px; overflow: auto'>General Credit</h4>
{{#each this}}
<li style='padding:10px; overflow: auto'>
<h3>{{title}}</h3>
<p>{{article}}</p>
</li>
{{/each}}

</ul>
</div>

</script>


My javascript looks like this:

//Data for Articles
var articleData = [
{
title: "My title here",
article: "You can learn more about it <a href='https://www.google.com'>here</a>"
}
];

//Get Template From Script Tag
var source1 = $("#my-template").html();
//Compile Template
var template1 = Handlebars.compile(source1);
$("#myDiv").append(template1(articleData));

Answer

You should use triple curly braces:

<li style='padding:10px; overflow: auto'>
    <h3>{{{title}}}</h3>
    <p>{{{article}}}</p>
</li>

So that handlebars doesn't escape the HTML code within your string.

Here the reference.

Cheers

Comments