handlebars.js 入门(1)
文凯康
handlebars.js是javascript的一个语义模板库，它通过将data 与 view分离 来快速构建web模板，加载时预编译，一定程度上提高了代码的复用性和可维护性，提高敲代码的效率，总之，是一个轻量级的js 库，功能与现在流行的react 等相比，功能较为单一，但是，对于小型的数据而言，是一个不错的选择。
① 需要引入handlebars.js库
② 通过script标签创建一个模板template，模板内容自定义
③ 定义一个位置（eg:div），显示模板中的内容
④ 通过script标签， 获取模板对象的内容-->compile预编译模板-->定义json数据--> 匹配json数据-->输出模板
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>handlebarsTest</title>
<script type="text/javascript" src="js/handlebars-v4.0.5.js"></script>
</head>
<body> <div id="list"></div> // 模板输出位置 <!--定义template-->
<script id="entry-template" type="text/x-handlebars-template">
<div class="myDiv">
<h2 class="title"> {{title}} </h2>
{{#persons}}
<ul class="myUl">
<li> 姓名：{{this.name}} ，年龄：{{this.age}} , 生日:{{this.birth}}</li>
</ul>
{{/persons}}
<ul class="myUl">
</ul>
</div>
</script> <!--获取模板，模板预编译，定义json数据,json数据匹配后，输出模板-->
<script type="text/javascript">
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var data = {
title: "person's information",
persons:[
{name:"mike", age:12, birth:"11-12"},
{name:"mary", age:10, birth:"10-28"},
{name:"maply", age:16, birth:"2-22"}
]
};
document.getElementById("list").innerHTML = template(data);
</script>
</body>
</html>
结束， 内置的helper：迭代：each ，条件渲染：if else ,unless ；嵌套式针对某一个数据对象：with
内置的helper相对来说 ，实现某些复杂的功能有些局限性，故可以通过Handlebars.registerHelper()自定义helper，实现较为复杂的
功能，<待续>
这篇文章很不错：http://www.tuicool.com/articles/fqQFN3
类似资料：