用純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);