編譯和渲染與香草的車把模板JS

我正在寫一個使用handlebars.js的應用程序，但The example code on their website使用JQuery，以及許多其他在線資源。不過，我想簡單地使用vanilla js編譯和渲染一個句柄模板。編譯和渲染與香草的車把模板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));

但我想用香草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'.

如何獲得此功能？

來源

2015-07-20 rjbultitude

調用編譯模板的輸出是一個字符串，而不是DOM樹。您可能需要使用innerHTML。

dataContainer.innerHTML = compiledHTML;

來源

2015-07-20 17:35:26 Joseph

完美的作品。這是否工作，因爲在幕後發生了一些類型轉換？ – rjbultitude

@rjbultitude有點像https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML – Joseph

這個問題似乎是與事實變量compiledHTML是一個字符串。我使用的解決方案是使用DOMparser，它允許我將sting轉換爲一個DOM節點，然後我可以將它傳遞給appendChild。

我正在使用的代碼是這樣的

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

我不得不使用documentElement因爲從解析結果HTML生成一個HierarchyRequestError錯誤。

來源

2015-07-20 17:35:49 rjbultitude

您可以使用Element.insertAdjacentHTML方法，它是跨瀏覽器友好的。
查看文檔在這裏： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

沒有關於如何插入編譯模板放到DOM四個選項：

beforebegin（打開標籤前或前一個同級）
afterbegin（第一個孩子）
beforeend（最後一個孩子）
afterend（結束標記或下一個兄弟）

後

在我來說，我是一個模板安裝到車體標籤的末尾，以便它看起來像這樣

來源

2016-10-22 00:04:19 Andre

謝謝安德烈。 insertAdjacentHTML絕對非常有用。我遇到的問題是由於我混淆了Element對象與節點，即https://developer.mozilla.org/en/docs/Web/API/Node＆https://developer.mozilla.org/en-US/docs /網絡/ API /元 – rjbultitude

編譯和渲染與香草的車把模板JS

回答

相關問題