Garces Garces - 6 months ago 33
Javascript Question

Jade template with pure JavaScript

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

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

Comments