您的位置：首页 > Web前端 > JavaScript

handlebars.js 入门(1)

2017-02-26 17:47 197 查看

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>

handlebars 有一些基本的语法，如变量调用：{{data}},变量不用转义： {{{data}}}，block 局部作用域:{{#data}}开始，{{/data}}
结束，内置的helper：迭代：each ，条件渲染：if else ,unless ；嵌套式针对某一个数据对象：with

内置的helper相对来说，实现某些复杂的功能有些局限性，故可以通过Handlebars.registerHelper()自定义helper，实现较为复杂的

功能，<待续>

这篇文章很不错：http://www.tuicool.com/articles/fqQFN3

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript handlebars

相关文章推荐

新的分享

章节导航