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