Search code examples
javascripthtmlhandlebars.js

How to add attribute to div, when using Handlebars JS?

I am using Handlebars JS to add elements from a template. The Handlebar template looks like this:

<script id="item-template" type="text/x-handlebars-template">
    <div class="case-item">{{title}}</div> 
</script>

Script

// create a handlebars template
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(source);

Dataset

var items = new vis.DataSet([{        
    title: 'This is a test title'
}

Result

When I run the code, the <div class="case-item"> only shows <div> it doesn't create the attribute class="case-item"

<div>This is a test title</div>

and not

<div class="case-item">This is a test title</div>

Any ideas why it "strips" the attribute?

Solution

  • I found another solution, to go around the Handlebar issue described in the question.

    I chose to follow the Vis Timeline Custom Styling example