Question

我正在编写一个使用handlebars.js的应用程序，但The example code on their website使用JQuery，以及许多其他在线资源。但是，我想简单地使用vanilla js编译和渲染一个把手模板。

这是HTML模板

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
     {{body}}
    </div>
  </div>
</script>

我在编译的JS下面，正如这里对类似问题的答案中所建议的那样 Does Handlebars require jQuery

var source = document.getElementById('entry-template').innerHTML;
var template = Handlebars.compile(source);

假设我的JSON存储在名为myData的变量中。

使用JQuery渲染模板时，您只需执行

即可

$('#data-section').append(template(myData));

但我想使用vanilla JS，所以我这样做：

var compiledHTML = template(myData);    
var dataContainer = document.getElementById('data-section');
dataContainer.appendChild(compiledHTML);

但我收到了错误

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

如何让它发挥作用？

Answer 1

调用已编译模板的输出是字符串，而不是DOM树。您可能希望改为使用innerHTML。

dataContainer.innerHTML = compiledHTML;

Answer 2

问题似乎是变量 compiledHTML 是一个字符串。我使用的解决方案是使用DOMparser，它允许我将sting转换为DOM节点，然后我可以将其传递给appendChild。

我使用的代码就是这个

var parser = new DOMParser();
var convertedHtml = parser.parseFromString(compiledHTML, 'text/xml');
dataContainer.appendChild(convertedHtml.documentElement);

我不得不使用 documentElement ，因为解析产生的HTML会生成 HierarchyRequestError 错误。

Answer 3

您可以使用跨浏览器友好的Element.insertAdjacentHTML方法请参阅此处的文档： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

如何将编译的模板插入DOM中有四个选项：

beforebegin（在打开标签之前或之前的兄弟姐妹）
afterbegin（第一个孩子）
beforeend（最后一个孩子）
afterend（在关闭标签或下一个兄弟之后）

在我的情况下，我将一个模板附加到body标签的末尾，所以它看起来像这样 document.getElementsByTagName('body')[0].insertAdjacentHTML("beforeend", myHbsTemplate(VM));

使用vanilla JS

3 个答案: