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

Answer 6

看看Monkberry DOM template engine。

它非常小（只有1.5kB gzip），无依赖库，服务器编译，单向数据绑定，而且速度非常快！

这里是模板和生成代码的示例：

<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在服务器上呈现模板。

monkberry.js.org

Answer 7

dna.js 是一个克隆DOM元素（https://dnajs.org）的模板引擎。

书籍的示例模板：

#FIG 3.2
Landscape
Center
Inches
Letter  
200.00
Single
-3
1200 2
6 8625 825 11775 7275
6 8625 1125 9075 3975
6 8625 1125 9075 2175
6 8625 1125 9075 1575
2 1 0 3 0 7 0 0 -1 0.000 1 0 -1 0 0 2
     8700 1200 9000 1200
2 1 0 3 0 7 0 0 -1 0.000 1 0 -1 0 0 2
     8700 1500 9000 1500
-6
6 8625 1725 9075 2175
2 1 0 3 0 7 0 0 -1 0.000 1 0 -1 0 0 2
     8700 1800 9000 1800
2 1 0 3 0 7 0 0 -1 0.000 1 0 -1 0 0 2
     8700 2100 9000 2100
...
4 0 0 0 0 0 20 0.0000 4 195 1080 35100 19800 Z-80 PIO\001
4 0 0 0 0 0 15 0.0000 4 180 930 34575 21075 CTL/DAT\001
4 0 0 0 0 0 15 0.0000 4 180 795 34575 21375 B/A SEL\001
4 0 0 0 0 0 15 0.0000 4 150 270 34575 21975 A6\001
4 0 0 0 0 0 15 0.0000 4 150 270 34575 22275 A5\001
4 0 0 0 0 0 15 0.0000 4 150 480 34575 22875 GND\001
4 0 0 0 0 0 15 0.0000 4 150 270 34575 24075 A0\001
4 0 0 0 0 0 15 0.0000 4 150 600 34575 24375 A STB\001
4 0 0 0 0 0 15 0.0000 4 150 570 34575 24675 B STB\001
4 0 0 0 0 0 15 0.0000 4 150 240 36525 21975 B6\001

调用将模板的副本插入DOM：

<h1>Featured Books</h1>
<div id=book class=dna-template>
   <div>Title:  <span>{{title}}</span></div>
   <div>Author: <cite>{{author}}</cite></div>
</div>

结果HTML：

dna.clone('book', { title: 'The DOM', author: 'Jan' });

提供样本“待办事项”：
https://jsfiddle.net/uLrc7kmp

todo

创建dna.js是为了避免构造和传递字符串模板（我是project维护者）。

Answer 8

你在寻找什么样的糖？原始的DOM api对我来说总是很好。如果你真的采用了这个想法，即模板引擎在性能方面不好，如果你想有效地构建一个DOM树，不要使用innerHTML。我倾向于使用document.createElement手动创建元素。我的模板是通过编写辅助函数来创建的，这些函数创建节点集合并通过设置.innerText属性用数据填充它们。然后我可以缓存对我希望经常引用的节点的引用，这样我就不必遍历DOM树来再次找到这些节点。

Answer 9

具有超级功能的免费MIT许可https://drupal.stackexchange.com/（您可以将更改的数据重新应用到相同的HTML结构中，以在任何数据更改时更新UI ...）

jQuery DNA Template

基于DOM树的JavaScript模板引擎

9 个答案: