純粋なJavaScriptのジェイドテンプレート

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

あなたの項目を表示するには、純粋なJavaScriptを使用している、このplunkerを参照してください。 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; 
    } 

を

本文の後に使用するスクリプト

pure.jsやblueimpのようなテンプレートエンジンjsを見つけたら、jsをhtmlに統合するが、jadeを使うと、それはいつも働いているとは限らない（より純粋なhtmlやejs）。

Answer 2

insertBeforeまたはappendChildの代わりに、insertAdjacentHTMLを使用します。

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

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