Handlebars 介绍
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。
http://handlebarsjs.com/installation.html (官方文档)
http://keenwon.com/992.html (使用手册)
//例子
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="warp"><!-- 编译后的内容 --></div>
<script src="./handlebars-v4.0.12.js"></script>
<!--引入handlebars模板:type="text/x-handlebars-template"-->
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
</div>
</script>
<script>
//第一步 获取模板
var entry = document.querySelector('#entry-template').innerHTML;
//第二步 编译模板
var template = Handlebars.compile(entry);
//第三步 传入数据上下文(context)
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
//第四步 渲染
var warp = document.querySelector('#warp').innerHTML = html;
</script>
</body>
</html>