使用Handlebars.js设置ID

Question

I'm trying to put an id with handlebars like this

 <script id="tpl" type="text/template"> {{#each fields.field}} <div class="form-group" id="{{name}}"> <p> Something here </p> </div> {{/each}} </script> 

How I compile my template :

 <script> var slingshot = function (url, tplId, div) { $.getJSON(url, function(data) { var template = $(tplId).html(); var stone = Handlebars.compile(template)(data); $(div).append(stone); }); } slingshot('referentiels.json', '#tpl', '.bs-callout'); </script> 

But it doesn't work. What is the correct syntax please ?

Thanks.

Answer 1

I got it, that was because I've done XSL use. XSL have a syntax which use {}. I so create a conflict between XSL and Handlebars. Then, I just had to put my attributes {{}} into .

Answer 2

Works fine here with your data example:

 var source = document.getElementById("tpl").innerText; var template = Handlebars.compile(source); var data = { fields: { field: [{ name: 'abc' }, { name: 'bcd' }] } }; document.getElementById('result').innerText = template(data); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script> <script id="tpl" type="text/template"> {{#each fields.field}} <div class="form-group" id="{{name}}"> <p> Something here </p> </div> {{/each}} </script> <div id="result"> </div> 

Answer 3

In your compilation code, this line is incorrect:

var stone = Handlebars.compile(template)(data);

If you are trying to make an IIFE , then it should be:

var stone = (Handlebars.compile(template))(data);

But really, I think it's much clearer to break it up into two lines:

var compiledTemplate = Handlebars.compile(template);
var stone = compiledTemplate(data);