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

用纯JavaScript的玉模板

2 个答案: