我正在尋找一個新的Javascript模板引擎來替換我的客戶端模板需求的舊jQuery模板。基於DOM樹的JavaScript模板引擎
我更喜歡模板引擎處理DOM樹而不是文本字符串的方法，稍後將已煮熟字符串的內容轉儲到innerHTML。這是更好的性能明智的，我發現DOM操作更適當的方式來構建更多的DOM樹。
我對Javascript模板引擎有什麼選擇，它會直接創建DOM樹而不是基於文本的引擎？我喜歡Mustache.js的無邏輯方法，但它似乎只對字符串進行操作。原生jQuery集成也將是一個不錯的功能。
透明度：
https://github.com/leonidas/transparency/
PURE：
http://beebole.com/pure/documentation/
板
https://github.com/flatiron/plates
爲什麼這一切：
我審查了所有4，他們都沒有積極維護（我錯了嗎？）。 Pure有一個最近的承諾，但它很小。 Transparency.js在7個多月內沒有看到提交（並且有大量未解決的問題）。 Plates和Weld似乎更不活躍。你有什麼建議？ – Gili 2013-12-12 19:56:48
透明度維持AFAIK。現在它非常穩定，所以維護者pyykkis可能沒有考慮添加新功能。這個人在IRC，並且據瞭解該項目並沒有死亡。 – 2013-12-12 21:25:11
你在找什麼樣的糖？原始的DOM API總是爲我工作得很好。如果您真的認同模板引擎在性能方面沒有優勢，那麼如果您想有效地構建DOM樹，請不要使用innerHTML。我傾向於使用document.createElement手動創建元素。我的模板是通過編寫幫助程序函數創建的，這些函數可以創建節點集合，並通過設置.innerText屬性將它們填充到數據中。然後，我可以緩存我希望經常參考的節點的引用，這樣我就不必遍歷DOM樹來再次找到這些節點。
SOMA模板是一個新的。
純DOM操作，很多功能，自然語法，可與其他庫完全擴展，如underscore.string，帶參數的函數調用，助手，監視器。根據需要只能更新一些節點的能力，DOM本身內部的模板。
哇，這個看起來不錯。像AngularJS一樣，但有一個更易於理解的API。 – 2012-12-10 22:05:53
我剛剛創建了純和透明度啓發DOM模板引擎。
它支持循環，條件和更多。
看看DOC：http://code.meta-platform.com/metajs/components/template/
不要affraid是MetaJS大庫，模板lib可以獨立使用。
短的例子：
HTML：
<div id="tpl">
<ul id="tasks">
<li>
<span class="task"></span>
<span class="due-date"></span>
</li>
</ul>
</div>
定義模板：
var tpl = Meta.Template(document.getElementById('tpl'), {
"ul#tasks li": $__repeat("tasks", {
".task": "task",
".due-date": $__date("d. m. Y", "due_date"),
"@": $__attrIf("completed", "complete")
})
});
渲染模板：
tpl({
tasks: [
{
task: "Write concept",
due_date: new Date(2015, 3, 22, 0, 0, 0, 0),
complete: true
}, {
task: "Consult with customer",
due_date: new Date(2015, 3, 25, 0, 0, 0, 0),
complete: false
}
]
});
結果：
<div id="tpl">
<ul id="tasks">
<li>
<span class="task" completed>Write concept</span>
<span class="due-date">22. 3. 2015</span>
</li>
<li>
<span class="task">Consult with customer</span>
<span class="due-date">25. 3. 2015</span>
</li>
</ul>
</div>
看看Monkberry DOM template engine。 
它非常小（只有1,5kB gzipped），無依賴庫，服務器編譯，單向數據綁定，並且速度非常快！
模板下面例子，生成的代碼：
<div>
<h1>{{ title }}</h1>
<p>
{{ text }}
</p>
</div>
會生成：
var div = document.createElement('div');
var h1 = document.createElement('h1');
var p = document.createElement('p');
div.appendChild(h1);
div.appendChild(p);
...
view.update = function (data) {
h1.textContent = data.title;
p.textContent = data.text;
};
Monkberry支持if，for和自定義標籤。並有很多渲染優化。 模板可以使用webpack，browserify或cli在服務器上呈現。
dna.js是一個模板引擎，克隆DOM元素（dnajs.org）。
一本書示例模板：
<h1>Featured Books</h1>
<div id=book class=dna-template>
<div>Title: <span>{{title}}</span></div>
<div>Author: <span>{{author}}</span></div>
</div>
呼叫插入模板的副本到DOM：
dna.clone('book', { title: 'The DOM', author: 'Jan' });
生成的HTML：
<h1>Featured Books</h1>
<div class=book>
<div>Title: <span>The DOM</span></div>
<div>Author: <span>Jan</span></div>
</div>
樣品到 - 做應用你可以撥弄：
http://jsfiddle.net/wo6og0z8
dna.js的創建正是爲了避免構建和傳遞字符串模板（我是project維護者）。
謝謝。我正在尋找一個潛在的解決方案，不尊重=） – 2012-02-14 18:43:05
http://blog.nodejitsu.com/micro-templates-are-dead – 2012-02-19 13:20:16
@qwertymk：習慣它，因爲這是每個人將如何在瀏覽器中做模板在三年內。 – 2012-08-16 17:54:25