Jade Vorlage mit reinem JavaScript

Question

Ich benutze Jade Template Engine in meiner App und möchte jquery entfernen, um die Leistung zu überprüfen. Ich kann in diesem Beispiel nicht herausfinden, wie man das mit reinem JS macht.

Statt jquery als solche zu verwenden:

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

Template aussehen würde wie:

ul#itemsLists 
    each item in items 
    li= item 

Answer 1

dieses Plunker sehen, ist es reine Javascript mit Ihrem Artikel angezeigt werden: 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; 
    } 

Skript nach dem Körper zu verwenden

Nachdem Sie einige Vorlagen-Engine js wie pure.js oder blueimp finden können, um die js in die HTML zu integrieren, aber mit Jade funktioniert es nicht immer (reiner HTML oder ejs).

Answer 2

Anstelle von insertBefore oder appendChild verwenden Sie insertAdjacentHTML.

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

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