最近在帮学校做个课程网站，就有人推荐用jquery+ajax+handlebars做网站前端，刚接触发现挺高大上的，于是就把一些基础学习笔记记录下来啦。

1.引用文件：

jquery.js文件下载：http:///jquery.com                handlebars.js文件下载：http://handlebarsjs.com/

  1. <span style="white-space:pre">	</span><script type="text/javascript" src="jquery.js"></script>
  2. 	<script type="text/javascript" src="handlebars.js"></script>

2.基础使用：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. 	<title>handlebars基础用法</title>
  6. 	<script type="text/javascript" src="jquery.js"></script>
  7. 	<script type="text/javascript" src="handlebars.js"></script>
  8. </head>
  9. <body>
  10. 	<div id="list">
  11. 		<script id="template" type="text/x-handlebars-template">
  12. 			<h3>{{title}}</h3>
  13. 			<p>{{content}}</p>
  14. 		</script>
  15. 	</div>
  16.  
  17. 	<script type="text/javascript">
  18. 		$(document).ready(function() {
  19.         //模拟json对象
  20.         var data = {
  21.                     "title":"中国",
  22.                     "content":"中华人名共和国"
  23.                 };
  24.         var template = $("#template").html();//jquery用法，获取模板代码
  25.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  26.  
  27.         var html = myTemplate(data);//封装json对象，生成HTML代码
  28.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  29.       });
  30. 	</script>
  31. </body>
  32. </html>

3.语法：

(1)handlebars.js表达式:一对双括号中间包含着内容。

  1. <span style="white-space:pre">	</span><h3>{{title}}</h3>
  2. 	<p>{{content}}</p>

(2)注释：{{!这是注释内容}} or {{!--这是注释内容--}}

(3)html编码：json对象中包含的html格式的内容，经{{}}后会被转化为纯文本，如果需要解析html内容的编码，则用{{{}}}

  1. 	<div id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			<h3>{{title}}</h3>
  4. 			<h3>{{{title}}}</h3>
  5. 			<p>{{content}}</p>
  6. 			<p>{{{content}}}</p>
  7. 		</script>
  8. 	</div>
  9.  
  10. 	<script type="text/javascript">
  11. 		$(document).ready(function() {
  12.         //模拟json对象
  13.         var data = {
  14.                     "title": "<中国 >",
  15.                     "content": '<a href="http://baidu.com">百度</a>'
  16.                 };
  17.         var template = $("#template").html();//jquery用法，获取模板代码
  18.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  19.  
  20.         var html = myTemplate(data);//封装json对象，生成HTML代码
  21.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  22.       });
  23. 	</script>

(4)快表达式：快表达式由{{#}}开始，由{{/}}结束，eg:

if块：{{#if}}{{code}}{{/if}}

(5)路径：可以使用.符号来查询你想要的属性。使用../来查询当前上下文中要查询的父路径的属性。

  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#province}}
  4. 			<li>{{name.first}}简称{{name.second}},国家：{{../country}}</li>
  5. 			{{/province}}
  6. 		</script>
  7. 	</ul>
  8.  
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function() {
  11.         //模拟json对象
  12.         var data = {
  13.                     country: "中国",
  14.                     province: [
  15.                     		{name:{first:"安徽",second:"皖"}},
  16.                     		{name:{first:"重庆",second:"渝"}}
  17.  
  18.                 			]
  19.                 };
  20.         var template = $("#template").html();//jquery用法，获取模板代码
  21.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  22.  
  23.         var html = myTemplate(data);//封装json对象，生成HTML代码
  24.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  25.       });
  26. 	</script>

(6)内置辅助函数:

 each循环：

基本用法

  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#each province}}
  4. 			<li>{{name}}</li>
  5. 			{{/each}}
  6. 		</script>
  7. 	</ul>
  8.  
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function() {
  11.         //模拟json对象
  12.         var data = {province: [
  13.                     		{name:"北京"},
  14.                     		{name:"天津"},
  15.                     		{name:"重庆"},
  16.                     		{name:"上海"}
  17.                 			]
  18.                 };
  19.         var template = $("#template").html();//jquery用法，获取模板代码
  20.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  21.  
  22.         var html = myTemplate(data);//封装json对象，生成HTML代码
  23.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  24.       });
  25. 	</script>

另外，如果传递给辅助函数的数据对象是一个数组，那么可以用this指代上下文。

  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#each this}}
  4. 			<li>{{first}}简称{{second}}</li>
  5. 			{{/each}}
  6. 		</script>
  7. 	</ul>
  8.  
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function() {
  11.         //模拟json对象
  12.         var data = [
  13.        				{first:"安徽",second:"皖"},
  14.     				{first:"重庆",second:"渝"}
  15.     				];
  16.         var template = $("#template").html();//jquery用法，获取模板代码
  17.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  18.  
  19.         var html = myTemplate(data);//封装json对象，生成HTML代码
  20.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  21.       });
  22. 	</script>

each嵌套循环：

  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#each this}}
  4. 				{{#each cities}}
  5. 					<li>{{this}}</li>
  6. 				{{/each}}
  7. 			{{/each}}
  8. 		</script>
  9. 	</ul>
  10.  
  11. 	<script type="text/javascript">
  12. 		$(document).ready(function() {
  13.         //模拟json对象
  14.         var data = [
  15.        				{
  16.        				cities:[
  17.        						"北京",
  18.        						"天津"
  19.        						]
  20.     				},
  21.     				{
  22.     					cities:[
  23.     						"重庆",
  24.     						"上海"
  25.     					]
  26.     				}
  27.     				];
  28.         var template = $("#template").html();//jquery用法，获取模板代码
  29.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  30.  
  31.         var html = myTemplate(data);//封装json对象，生成HTML代码
  32.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  33.       });
  1. <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">each循环中的索引：@index,默认从0开始</span>
  1. <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html">	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#each this}}
  4. 			<li>{{@index}}</li>
  5. 			<li>{{name}}</li>
  6. 			{{/each}}
  7. 		</script>
  8. 	</ul>
  9.  
  10. 	<script type="text/javascript">
  11. 		$(document).ready(function() {
  12.         //模拟json对象
  13.         var data = [
  14.         			{name:"北京"},
  15.         			{name:"重庆"},
  16.         			{name:"天津"},
  17.         			{name:"上海"}
  18.         			];
  19.         var template = $("#template").html();//jquery用法，获取模板代码
  20.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  21.  
  22.         var html = myTemplate(data);//封装json对象，生成HTML代码
  23.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  24.       });
  25. 	</script>
  1.  
  1. <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>
  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			{{#if province}}
  4. 				<li>{{country}}的{{province}}</li>
  5. 			{{/if}}
  6. 		</script>
  7. 	</ul>
  8.  
  9. 	<script type="text/javascript">
  10. 		$(document).ready(function() {
  11.         //模拟json对象
  12.         var data = {country:"中国",province:"重庆"};
  13.         var template = $("#template").html();//jquery用法，获取模板代码
  14.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  15.  
  16.         var html = myTemplate(data);//封装json对象，生成HTML代码
  17.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  18.       });
  19. 	</script>

else和if配合使用，而unless是当条件为假时调用，即等价于if/else块的else部分。

自定义辅助函数：使用Handlebars.registerHelper("name",function(parameters){...code...})语句自定义，name是函数名，function接受任意的参数作为函数的执行部分。

  1. 	<ul id="list">
  2. 		<script id="template" type="text/x-handlebars-template">
  3. 			<li>{{week day}}</li>
  4. 		</script>
  5. 	</ul>
  6.  
  7. 	<script type="text/javascript">
  8. 		$(document).ready(function() {
  9.         //模拟json对象
  10.         var data = {day:0};
  11.         var template = $("#template").html();//jquery用法，获取模板代码
  12.         var myTemplate = Handlebars.compile(template);//注册Handlebars模板
  13.  
  14.         Handlebars.registerHelper("week",function(today){
  15.         	switch(today){
  16.         		case 0:return "sunday";
  17.         		case 1:return "monday";
  18.         		default:return "i don't know";
  19.         	}
  20.         });
  21.  
  22.         var html = myTemplate(data);//封装json对象，生成HTML代码
  23.         $('#list').html(html);//jquery用法，将生成的html代码替换template模板
  24.       });
  25. 	</script>

还有个是自定义辅助块函数，还没弄懂。。。

handlebars.js基础学习笔记的更多相关文章

  1. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  2. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  3. node.js 基础学习笔记3 -express

    1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...

  4. node.js 基础学习笔记3 -http

    http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...

  5. node.js 基础学习笔记2

    Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...

  6. node.js 基础学习笔记1

    1. node -v 查看版本 node -e --js代码 node --进入编辑模式 Ctrl+C 退出编译模式 var http=require('http') http.createServe ...

  7. js基础学习笔记（六）

    事件(可以被 JavaScript 侦测到的行为) 主要事件表: 加载事件(onload) 事件会在页面加载完成后立即发生,同时执行被调用的程序. 卸载事件(onunload) 当用户退出页面时(页面 ...

  8. js基础学习笔记（二）

    2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出&q ...

  9. js基础学习笔记（一）

    * 在js编写过程中,尽量保持统一使用单引号 'XXXX': * 所有变量都要声明 var,避免全局函数调用的冲突: 1.1    输出内容 docment.write(‘aileLi’); 改变某I ...

随机推荐

  1. 9.OpenStack安装web界面

    安装仪表板 安装仪表板组件 yum install -y openstack-dashboard httpd mod_wsgi memcached python-memcached 编辑/etc/op ...

  2. MSSQL—字符串分离（Split函数）

    前面提到了记录合并,有了合并需求肯定也会有分离需求,说到字符串分离,大家肯定会想到SPLIT函数,这个在.NET,Java和JS中都有函数,很可惜在SQL SERVER中没有,我们只能自己来写这么一个 ...

  3. HDU 1863 畅通工程 最小生成树

    思路: 比较典型的最小生成树的题目了..在这里用求最小生成树的经典算法K(Kruskal)算法和P(Prim)算法.我的 K 算法用的是结构体来存图,P 算法用的是邻接矩阵来存图,K算法的复杂度是O( ...

  4. Codeforces Round #503 (by SIS, Div. 2) C. Elections（枚举，暴力)

    原文地址 C. Elections time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  5. noip数论复习总结

    (上不了p站我要死了,侵权度娘背锅) 勉勉强强算是把数论复习的差不多了. 总结一下吧. 其实数论的知识大部分是结合在一起的,勉强分类总结 组合数 求法 组合数的求法根据不同情况选用不同的方法 2.3都 ...

  6. [HDU6240]Server

    题目大意: 用$n$条线段覆盖区间$[1,t]$上的整点.每条线段有4个属性$(S_i,T_i,A_i,B_i)$,表示用第$i$条线段可以覆盖区间$[S_i,T_i]$.若选取线段的集合为$S$,最 ...

  7. JDBC完整版实现

    package songyan.jdbc.test; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...

  8. 【Node.js】4.从一个例子切入Node js的规范

    在开始之前,需要明确的一点就是, ①Node应用是由模块组成的,每一个文件都是一个模块,有自己的作用域. ②在这个文件里定义的变量,函数,类都是私有的,对其他的文件不可见. ③在一个文件中,也就是在一 ...

  9. 利用【深度网络】高效提取feature

    extracting features from a learned model, and add some new features yourself.

  10. Ubuntu14.041+VMware12.0NET方式网卡连接虚拟机联网问题解决方法

    进入命令:vi /etc/network/interfaces 修改成上图所示: 网络连接方式设置为NET方式: 重启网卡:顺序执行 ifdown eth0 ifup eth0 完成网卡的重启: 使用 ...