编译和渲染与香草的车把模板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

回答

相关问题