純 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

使用 insertAdjacentHTML 代替 insertBefore 或 appendChild。

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

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