最近在帮学校做个课程网站，就有人推荐用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>
还有个是自定义辅助块函数，还没弄懂。。。