handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦。
1.引用文件:
jquery.js文件下载:http:///jquery.com handlebars.js文件下载:http://handlebarsjs.com/
<span style="white-space:pre"> </span><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="handlebars.js"></script>
2.基础使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>handlebars基础用法</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="handlebars.js"></script> </head> <body> <div id="list"> <script id="template" type="text/x-handlebars-template"> <h3>{{title}}</h3> <p>{{content}}</p> </script> </div> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = { "title":"中国", "content":"中华人名共和国" }; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script> </body> </html>3.语法:
(1)handlebars.js表达式:一对双括号中间包含着内容。
<span style="white-space:pre"> </span><h3>{{title}}</h3> <p>{{content}}</p>(2)注释:{{!这是注释内容}} or {{!--这是注释内容--}}
(3)html编码:json对象中包含的html格式的内容,经{{}}后会被转化为纯文本,如果需要解析html内容的编码,则用{{{}}}
<div id="list"> <script id="template" type="text/x-handlebars-template"> <h3>{{title}}</h3> <h3>{{{title}}}</h3> <p>{{content}}</p> <p>{{{content}}}</p> </script> </div> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = { "title": "<中国 >", "content": '<a href="http://baidu.com">百度</a>' }; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>
(4)快表达式:快表达式由{{#}}开始,由{{/}}结束,eg:
if块:{{#if}}{{code}}{{/if}}
(5)路径:可以使用.符号来查询你想要的属性。使用../来查询当前上下文中要查询的父路径的属性。
<ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#province}} <li>{{name.first}}简称{{name.second}},国家:{{../country}}</li> {{/province}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = { country: "中国", province: [ {name:{first:"安徽",second:"皖"}}, {name:{first:"重庆",second:"渝"}} ] }; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>
(6)内置辅助函数:
each循环:
基本用法
<ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#each province}} <li>{{name}}</li> {{/each}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = {province: [ {name:"北京"}, {name:"天津"}, {name:"重庆"}, {name:"上海"} ] }; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>另外,如果传递给辅助函数的数据对象是一个数组,那么可以用this指代上下文。
<ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#each this}} <li>{{first}}简称{{second}}</li> {{/each}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = [ {first:"安徽",second:"皖"}, {first:"重庆",second:"渝"} ]; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>each嵌套循环:
<ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#each this}} {{#each cities}} <li>{{this}}</li> {{/each}} {{/each}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = [ { cities:[ "北京", "天津" ] }, { cities:[ "重庆", "上海" ] } ]; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 });
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">each循环中的索引:@index,默认从0开始</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html"> <ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#each this}} <li>{{@index}}</li> <li>{{name}}</li> {{/each}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = [ {name:"北京"}, {name:"重庆"}, {name:"天津"}, {name:"上海"} ]; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><strong><span style="font-size:12px;">if条件:</span></strong>if条件不接受任何的逻辑条件判断语句,仅判断值的true。若需要逻辑判断语句,则需要使用自定义辅助函数。</span>
<ul id="list"> <script id="template" type="text/x-handlebars-template"> {{#if province}} <li>{{country}}的{{province}}</li> {{/if}} </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = {country:"中国",province:"重庆"}; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>else和if配合使用,而unless是当条件为假时调用,即等价于if/else块的else部分。
自定义辅助函数:使用Handlebars.registerHelper("name",function(parameters){...code...})语句自定义,name是函数名,function接受任意的参数作为函数的执行部分。
<ul id="list"> <script id="template" type="text/x-handlebars-template"> <li>{{week day}}</li> </script> </ul> <script type="text/javascript"> $(document).ready(function() { //模拟json对象 var data = {day:0}; var template = $("#template").html();//jquery用法,获取模板代码 var myTemplate = Handlebars.compile(template);//注册Handlebars模板 Handlebars.registerHelper("week",function(today){ switch(today){ case 0:return "sunday"; case 1:return "monday"; default:return "i don't know"; } }); var html = myTemplate(data);//封装json对象,生成HTML代码 $('#list').html(html);//jquery用法,将生成的html代码替换template模板 }); </script>还有个是自定义辅助块函数,还没弄懂。。。
如果你觉得本文对你有帮助,请点击右下角的推荐让更多人知道^_^
欢迎光临个人网站 qingguoing.com