JavaScript页面模版引擎handlebars.js学习及使用
来源：互联网 发布：淘宝货到付款怎么退货 编辑：程序博客网 时间：2024/06/05 21:50
Handlebars.js是一个Javascript客户端的模板引擎（它也能用于服务器端）。它是一个Javascript库，就像你在页面中包含其他.js文件一样。有了它，在你的HTML页面内添加模板，模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。
如何引入Handlebars.js
首选要引入JQuery插件，其次在引用Handlebars.js即可，仅仅需要这两个js文件。
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script>
each-基本循环使用方法：
<!DOCTYPE html><html><head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>each-基本循环使用方法</title></head><body> <h1>each-基本循环使用方法</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each student}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "sex": "男", "age": 28 }, { "name": "李四", "sex": "女", "age": 30 }, { "name": "妞妞", "sex": "女", "age": 32 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script></body></html>运行结果：
循环是Handlebars.js一个重要特性，#each可以理解成循环命令，循环的是json对象中的student属性。对于每次循环，都可以读出里边的name、sex、age属性。
each-循环中使用this：
<!DOCTYPE html><html><head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>each-循环中使用this</title></head><body> <h1>each-循环中使用this</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "name": "张三丰", "sex": "男", "age": 28 }, { "name": "李妮妮", "sex": "女", "age": 30 }, { "name": "王妞妞", "sex": "女", "age": 32 } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script></body></html>同样可以显示出来,可以用#each this，表示遍历当前对象!this表示当前的上下文。
with-进入到某个属性(进入到某个上下文环境)
<!DOCTYPE html><html><head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>with-进入到某个属性(进入到某个上下文环境)</title></head><body> <h1>with-进入到某个属性(进入到某个上下文环境)</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>兴趣爱好</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> <td> {{#with favorite}} {{#each this}} <p>{{name}}</p> {{/each}} {{/with}} </td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "name": "张三丰", "sex": "男", "age": 28, "favorite": [ { "name":"唱歌" },{ "name":"篮球" } ] }, { "name": "李妮妮", "sex": "女", "age": 30, "favorite": [ { "name":"上网" }, { "name":"足球" } ] }, { "name": "王妞妞", "sex": "女", "age": 18, "favorite": [ { "name":"电影" }, { "name": "旅游" } ] } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script></body></html>运行结果如下图：
在循环每名学生时，学生的favorite属性并不是一个普通的字符串，而又是一个json对象，确切的说是一个数组，我们需要把学生的爱好全部取出来。
这时候就需要with命令，这个命令可以让当前的上下文进入到一个属性中，{{#with favorite}}表示进入到favorite属性的上下文中，而favorite属性中又是一个list，因此可以用{{#each this}}进行遍历，表示遍历当前上下文环境，对于每次遍历。
with-终极this应用
如果JSON键值是个数组的话，也可以用this获得。例如 "favorite": ["唱歌", "篮球"]，获取的话，可以用 this获取得到.
if-判断的基本用法
<!DOCTYPE html><html><head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>if-判断的基本用法</title></head><body> <h1>if-判断的基本用法</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> {{#if name}} <td>{{name}}</td> {{else}} <td></td> {{/if}} <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "sex": "男", "age": 28 }, { "name": "李妮妮", "sex": "女", "age": 30 }, { "name": "王妞妞", "sex": "女", "age": 32 } ]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script></body></html> 在遍历student时，由于数据缺失，并不是每一个学生都有name属性，我们不想显示没有name属性的学生，这时就需要if来做判断。
{{#if name}}可以用来判断当前上下文中有没有name属性，实际上，它是尝试去读取name属性，如果返回的为undefined、null、""、[]、false任意一个，都会导致最终结果为假。
其实，在Handlebars的模板标签中，{{#if condition}}{{/if}}只能判断这个condition是否为true和false，并不能判断是否等于某个特定的值。
可以借助Handlebars的registerHelper方法来实现
由于if功力不足引出的Helper方法
<!DOCTYPE html><html><head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>if功力不足</title></head><body> <h1>each-基本循环使用方法</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody id="tableList"></tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="script/handlebars-v4.0.5.min.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each student}} {{#if name}} {{#compare age 20}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{else}} <tr> <td>?</td> <td>?</td> <td>?</td> </tr> {{/compare}} {{/if}} {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = { "student": [ { "sex": "男", "age": 18 }, { "name": "李四", "sex": "女", "age": 30 }, { "name": "妞妞", "sex": "女", "age": 32 } ] }; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架 //$("#table-template").html()是jquery的语法。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。 //注册一个比较大小的Helper,判断v1是否大于v2 Handlebars.registerHelper("compare",function(v1,v2,options){ if(v1>v2){ //满足添加继续执行 return options.fn(this); }else{ //不满足条件执行{{else}}部分 return options.inverse(this); } }); $('#tableList').html(myTemplate(data)); }); </script></body></html>注：Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，第三个参数是固定的，就叫options，如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。关于options的使用，小菜所了解的就是这种用法，return options.fn(this);表示满足条件继续执行，也就是执行{{#compare }}和{{else}}之间的代码；return options.inverse(this);表示不满足条件，也就是执行{{else}}和{{/compare}}之间的代码。
源码实例下载！
0 0
- JavaScript页面模版引擎handlebars.js学习及使用
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- handlebars.js模版引擎中EACH循环遍历的使用
- 介绍一款js模版引擎handlebars
- handlebars.js模版引擎入门案例
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- Handlebars js模版
- Handlebars js模版
- Handlebars.js 模板引擎
- 模板引擎 Handlebars.js
- Handlebars.js 模板引擎
- Handlebars.js 模板引擎
- swift 3.0 -UINavigationController
- Redis数据过期策略探究
- usaco1.3.5（dfs生成配对情况）
- RecyclerView和ScrollView嵌套使用
- opencv调用摄像头+灰度图+高斯滤波+Canny算子
- JavaScript页面模版引擎handlebars.js学习及使用
- 智能指针
- OracleDBConsole服务及EM相关问题
- Java面试题（前）
- PHP学习总结（5）——PHP入门篇之PHP字符串
- http代理服务器工作步骤：
- 笔记本电脑设置WIFI
- 机型适配代码中dp转px
- border:none;和border:0;的区别
