使用Vanilla JS編譯和渲染車把模板

Question

我正在編寫一個使用handlebars.js的應用程序，但他們網站上的示例代碼使用JQuery以及許多其他在線資源。 但是，我想簡單地使用香草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在下面，如此處對類似問題的回答中所建議的那樣， 把手是否需要jQuery

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

假設我的JSON存儲在名為myData的變量中。

使用JQuery呈現模板時，您只需

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

但是我想使用香草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

您可以使用跨瀏覽器友好的Element.insertAdjacentHTML方法。
在此處查看文檔： https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

如何將已編譯的模板插入DOM有四個選項：

1. 開始之前（在打開標簽之前或作為先前的同級對象）
2. 開始之后（第一個孩子）
3. 之前（最后一個孩子）
4. afterend（在關閉標簽或下一個同級之后）

在我的情況下，我將模板附加到body標簽的末尾，因此看起來就像document.getElementsByTagName('body')[0].insertAdjacentHTML("beforeend", myHbsTemplate(VM));

Answer 3

問題似乎在於事實，即變量compedHTML是字符串。 我使用的解決方案是使用DOMparser，它使我可以將字符串轉換為DOM節點，然后將其傳遞給appendChild。

我正在使用的代碼是這樣

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

我必須使用documentElement，因為解析產生的HTML會產生HierarchyRequestError錯誤。