纯 JavaScript 的 Jade 模板答案

【问题标题】：Jade template with pure JavaScript纯 JavaScript 的 Jade 模板
【发布时间】：2016-05-12 13:23:05
【问题描述】：

我在我的应用程序中使用了翡翠模板引擎，并想删除 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

【问题讨论】：

忘记添加我在早午餐工作

标签： javascript jquery performance templates pug

【解决方案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）。

【讨论】：

【解决方案2】：

使用 insertAdjacentHTML 代替 insertBefore 或 appendChild。

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

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

【讨论】：