Jason Bourne Jason Bourne - 4 months ago 28
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'>



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


You should use triple curly braces:

<li style='padding:10px; overflow: auto'>

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

Here the reference.