用纯JavaScript编写的Jade模板

Question

我在我的应用中使用了jade模板引擎，并且想要删除jquery来检查性能。在这个例子中，无法弄清楚如何用纯JS完成它。

而是使用jQuery这样的：

var items = ['it1', 'it2', 'it3']; 
var tmpl = require('views/list'); 
var html = tmpl({ items: App.items }); 
$('body').append(html); 

模板会为看：

ul#itemsLists 
    each item in items 
    li= item 

Answer 1

看到这个plunker，它是使用纯JavaScript来显示您的项目： http://plnkr.co/edit/g7LQdO6enO2nlKpUDnum?p=preview

script(type='text/javascript'). 
    var items = ['it1', 'it2', 'it3']; 
    var ul = document.getElementById('itemsLists'); 
    items.forEach(displayElem); 
    function displayElem(element, index) { 
    var li = document.createElement('li'); 
    ul.appendChild(li); 
    t = document.createTextNode(element); 
    li.innerHTML=li.innerHTML + element; 
    } 

脚本使用后的身体

在找到一些模板引擎js（如pure.js或blueimp）来将js集成到html中，但使用jade时，它并不总是可用（更纯的html或ejs）。

Answer 2

而不是insertBefore或appendChild，使用insertAdjacentHTML。

var tmpl = require('views/list'); 
var html = tmpl({ items: App.items }); 

var a = document.querySelector('p'); 
a.insertAdjacentHTML('afterend', html);