使用Handlebars.js设置ID

Question

我正在尝试用这样的把手放置一个id

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

我如何编译模板：

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

但这是行不通的。 请问正确的语法是什么？

谢谢。

Answer 1

我明白了，那是因为我已经使用XSL。 XSL具有使用{}的语法。 因此，我在XSL和Handlebars之间造成了冲突。 然后，我只需要将属性{{}}放入。

Answer 2

在您的数据示例中可以正常工作：

 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

在您的编译代码中，此行不正确：

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

如果您要进行IIFE ，则应该是：

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

但实际上，我认为将其分为两行更为清晰：

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