最近在帮学校做个课程网站，就有人推荐用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>



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


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

    
								
  1. 两万字Vue.js基础学习笔记
		
    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
    
		
    2. 
						
  2. 两万字Vue.js基础学习笔记（二）
		
    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
    
		
    3. 
						
  3. node.js 基础学习笔记3 -express
		
    1.工作原理 当通过app.js建立的服务器时,会看到一个简单的页面.返回页面时,浏览器会向服务器发送请求.app会解析请求的路径,调用相应的逻辑,调用对应的视图模板,传递对象数值,最终生成HTML页 ...
    
		
    4. 
						
  4. node.js 基础学习笔记3 -http
		
    http模块,其中封装了一个高效的HTTP服务器和一个建议的HTTP客户端 http.server是一个基于事件的HTTP服务器 http.request则是一个HTTP客户端工具,用户向服务器发送请 ...
    
		
    5. 
						
  5. node.js 基础学习笔记2
		
    Module和Package是Node.js最重要的支柱. Node.j 提供require函数来调用其他模块,而且模块都是基于文件.模块和包区别是透明的,因此常常不作区分. 1.模块和文件一一对应. ...
    
		
    6. 
						
  6. node.js 基础学习笔记1
		
    1. node -v 查看版本 node -e --js代码 node --进入编辑模式 Ctrl+C 退出编译模式 var http=require('http') http.createServe ...
    
		
    7. 
						
  7. js基础学习笔记（六）
		
    事件(可以被 JavaScript 侦测到的行为) 主要事件表: 加载事件(onload) 事件会在页面加载完成后立即发生,同时执行被调用的程序. 卸载事件(onunload) 当用户退出页面时(页面 ...
    
		
    8. 
						
  8. js基础学习笔记（二）
		
    2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出&q ...
    
		
    9. 
						
  9. js基础学习笔记（一）
		
    * 在js编写过程中,尽量保持统一使用单引号 'XXXX': * 所有变量都要声明 var,避免全局函数调用的冲突: 1.1    输出内容 docment.write(‘aileLi’); 改变某I ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. (10)ubuntu内核源码树
			
    ubuntu内核源码树目录: root@ubuntu:/lib/modules/3.13.0-32-generic/build#
    
			
    2. 
						
  2. Charles安装
			
    Charles 是一个网络抓包工具,在做 APP 抓包的时候会用到,相比 Fiddler 来说,Charles 的功能更为强大,而且跨平台支持更好,所以在这里我们选用 Charles 来作为主要的移动 ...
    
			
    3. 
						
  3. 计蒜客 25985.Goldbach-米勒拉宾素数判定(大素数) (2018 ACM-ICPC 中国大学生程序设计竞赛线上赛 B)
			
    若干年之前的一道题,当时能写出来还是超级开心的,虽然是个板子题.一直忘记写博客,备忘一下. 米勒拉判大素数,关于米勒拉宾是个什么东西,传送门了解一下:biubiubiu~ B. Goldbach 题目 ...
    
			
    4. 
						
  4. POJ 2337 Catenyms (欧拉图)
			
    本文链接http://i.cnblogs.com/EditPosts.aspx?postid=5402042 题意: 给你N个单词,让你把这些单词排成一个序列,使得每个单词的第一个字母和上一个字单词的 ...
    
			
    5. 
						
  5. SpringCloud简介(一)
			
    一.SpringCloud简介 SpringCloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.负载均衡.微代理.事件总线.全局锁.决策竞选.分布式会话等等 ...
    
			
    6. 
						
  6. HDU 6396 Swordsman --------2018 Multi-University Training Contest 7 (模拟+读入挂)
			
    原题地址: 打怪升级 一开始有N个怪物:主角有K个能力:只有K个能力都击败怪物才能斩杀怪物并获得K个能力的增值:问最多能杀几个怪物: 做法: 用优先队列把怪物能力装进去:能力小放前面: 最重要的是数据 ...
    
			
    7. 
						
  7. docker网络及Dockerfile
			
    1.制作镜像 使用阿里的yum源,网址:https://opsx.alibaba.com/mirror,或者mirrors.aliyun.com,点击帮助,就会有弹框出来. docker pull c ...
    
			
    8. 
						
  8. luogu P1122 最大子树和
			
    题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是当日课后,小明 ...
    
			
    9. 
						
  9. 浅浅地谈一下随机算法【poj2454】【poj3318】
			
    随机算法我也只是稍微接触了一下,就是想写篇博客自己稍微总结一下 其实随机算法也算是一个玄学吧,运气不好还是会wa.但是我们知道,计算机可以在短时间内计算大量的数据,所以碰到正确答案的概率还是挺大的.  ...
    
			
    10. 
						
  10. Ubuntu 16.04/CentOS 6.9安装Apache压力（并发）测试工具ab
			
    说明: ab工具已经在Apache中包含,如果不想安装Apache,那么可以使用下面方法单独安装. 安装: Ubuntu: sudo apt-get install apache2-utils Cen ...
    
			
    11.