纯JavaScript的Jade模板

Jade template with pure JavaScript

本文关键字：模板 Jade JavaScript      更新时间：2023-09-26

我在应用程序中使用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

看到这个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）。

使用insertAdjacentHTML而不是insertBefore或appendChild。

var tmpl = require('views/list');
var html = tmpl({ items: App.items });
var a = document.querySelector('p');
a.insertAdjacentHTML('afterend', html);
相关文章：