纯 JavaScript 的 Jade 模板

Question

I am using jade template engine in my app and want to remove jquery to check performance. Cannot figure out how to do it with pure JS in this example.

Instead of using jquery as such:

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

Template would look as:

ul#itemsLists
    each item in items
    li= item

Answer 1

See this plunker, it is using pure javascript to display your items: 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;
  }

script to use after the body

After you can find some template engine js such as pure.js or blueimp to integrate the js into the html but with jade it's not always working (more pure html or ejs).

Answer 2

Instead of insertBefore, or appendChild, use insertAdjacentHTML.

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

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