Handlebars是什么
Handlebars是javascript的一个语义编译模板，它可以兼容Mustache，引入的Mustache可以获得Handlebars的一些额外功能。
Handlebars语句
1 <div class="entry">
2 <h1>{{title}}</h1> //Handlebars的语句是从花括号开始{{内容}}
3 <div class="body">
4 {{body}}
5 </div>
6 </div>
Handlebars预编译
1.安装：可以在官网http://handlebarsjs.com/下载Handlebars，是个js文件，所以可以像引用js文件一样，把这个放在head标签内
2.预编译模块
1 <script id="entry-template" type="text/x-handlebars-template">
2 /*template content 这里放置模板内容
3 <div class="entry">
4 <h1>{{title}}</h1>
5 <div class="body">
6 {{body}}
7 </div>
8 </div>
9 **/
10 </script>
3.编译模板
1 <script>
2 $(function(){
3 var source = $("#entry-template").html();
4 var template = Handlebars.compile(source); //编译模板
5 var context = {title: "My New Post", body: "This is my first post!"}; //模拟json数据
6 var html = template(context);
7 })
8 </script>
结果如下：
1 <div class="entry">
2 <h1>My New Post</h1>
3 <div class="body">
4 This is my first post!
5 </div>
6 </div>
HTML溢出(Escaping)
1 <div class="entry">
2 <h1>{{title}}</h1>
3 <div class="body">
4 {{{body}}} //json数据如下{title:"<p>hello</p>"，body:"<p>world<p>"}
5 </div>
6 </div>
结果如下：
1.<p>hello<p> //title的值
2.world //body的值
注意json数据含有html标签的话，使用{{value}}，它将被escape并且不被解析，如果你希望生成html的话就使用{{{value}}}这种形式的。
Block expressions
使用Block expressions是从{{#helperName
options}}这种模式开始的，{{/helperName}}结束的
使用一个helper创建一个模
1 {{#list people}}{{firstName}} {{lastName}}{{/list}} //json数据如下{
2 people: [
3 {firstName: "Yehuda", lastName: "Katz"},
4 {firstName: "Carl", lastName: "Lerche"},
5 {firstName: "Alan", lastName: "Johnson"}
6 ]
7 }
list helper代码如下
1 Handlebars.registerHelper(‘list‘, function(items, options) {
2 var out = "<ul>"; //list helper传进两个参数，第1个参数为person，第2个参数为options，包含fn属性
3 for(var i=0, l=items.length; i<l; i++) {
4 out = out + "<li>" + options.fn(items[i]) + "</li>";
5 }
6
7 return out + "</ul>";
8 });
结果:
<ul>
<li>Yehuda Katz</li>
<li>Carl Lerche</li>
<li>Alan Johnson</li>
</ul>
完整的demo如下：
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>HanderBarx学习笔记</title>
6 <script src="scripts/jquery.min.js"></script>
7 <script src="scripts/handlebars-v1.3.0.js"></script>
8 <script id="my-template" type="text/x-handlebars-template">
9 {{#list people}}{{firstname}}{{lastName}}{{/list}}
10 </script>
11 <script>
12 $(function () {
13 var source = $("#my-template").html();
14 var template = Handlebars.compile(source);
15 //list helper
16 Handlebars.registerHelper(‘list‘, function (item, options) { //people作为第一个参数，options作为第二个参数，包含一个fn属性
17 var out = "<ul>";
18 for (var i = 0; i < item.length; i++) {
19 out = out + "<li>" + options.fn(item[i]) + "</li>";
20 }
21 return out + "</ul>";
22 })
23 var context = { people: [{ firstName: "Yehuda", lastName: "Kate" }, {firstName:"Carl",lastName:"Lech"}]}
24 var html = template(context);
25 $("#result").html(html);
26 })
27 </script>
28 </head>
29 <body>
30 <div id="result"></div>
31 </body>
32 </html>
Handlebars学习笔记2,码迷,mamicode.com
时间： 2024-10-10 06:56:02