Handlebars的使⽤⽅法⽂档整理（Handlebars.js）Handlebars是⼀款很⾼效的模版引擎，提供语意化的模版语句，最⼤的兼容Mustache模版引擎, 提供最⼤的Mustache模版引擎兼容, ⽆需学习新语法即可使⽤;
Handlebars.js和Mustache 的
⽬前版本为 2.0.0 , ⽆压缩的情况下⽬测是 3000 ⾏源代码，约 200kb ;
下⾯这个是基本的模版表达式,
其中 {{ 和 }} 之间为handlerbars的变量;
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
把数据放到⾃⼰定义的 <script> 标签中;
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
编译模版
使⽤ Handlebarspile 进⾏编译模版;
var source = $("#entry-template").html();
var template = Handlebarspile(source);
智能编译模版(在移动端也能运⾏哦么么哒)
⽣成html代码
通过上⾯的模版和数据混合编译后的结果:
var context = {title: "标题", body: "我是字符串!"}
var html = template(context);
JS⽣成的结果如下:
<div class="entry">
<h1>标题</h1>
<div class="body">
我是字符串!
</div>
</div>
//代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="cdn.madebyglutard/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div1"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script>
//JS代码
var source = $("#entry-template").html();
var template = Handlebarspile(source);
var context = {title: "标题", body: "我是字符串!"}
var html = template(context);
</script>
</body>
</html>
//模版的代码和JS的代码如防⽌HTML被转义的⽅法;
{{ }}和 {{{}}}和区别就是, 如果你不希望变量⾥⾯的字符串被转义就使⽤{{{ }}}对变量进⾏处理;
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>
数据如下：
{
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
}
定义的Helper如下
text = Handlebars.Utils.escapeExpression(text);
url = Handlebars.Utils.escapeExpression(url);
var result = '<a href="' + url + '">' + text + '</a>';
return new Handlebars.SafeString(result);
});
渲染以后的结果如下：
<div class="entry">
<h1>All About <p> Tags</h1>
<div class="body">
<p>This is a post about <p> tags</p>
</div>
</div>
/
/代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="cdn.madebyglutard/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div2"></div>
<script id="entry-template1" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>
</script>
<script>
text = Handlebars.Utils.escapeExpression(text);
url = Handlebars.Utils.escapeExpression(url);
var result = '<a href="' + url + '">' + text + '</a>';
return new Handlebars.SafeString(result);
});
var source = $("#entry-template1").html();
var template = Handlebarspile(source);
var context = {
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
};
var html = template(context);
</script>
</body>
</html>
Handlerbars的⾃定义表达式
块表达式允许你定义 helpers ⽣成⾃定义的HTML，下⾯这个是JS的模版;
{{#list people}}{{firstName}} {{lastName}}{{/list}}
如果你使⽤下⾯的数据:
{
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
}
在JS⾥⾯定义这个helper;
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于⼀个编译的函数*/ }
return out + "</ul>";
});
执⾏以后的结果是:
<ul>
<li>Yehuda Katz</li>
<li>Carl Lerche</li>
<li>Alan Johnson</li>
jquery是什么有什么作用</ul>
⾃定义块表达式还有很多别的特性, ⽐如可以直接使⽤ IF 和 ELSE；
//代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="cdn.madebyglutard/libs/handlebars.js/2.0.0/handlebars.js"></script>
<div id="div3"></div>
<script id="entry-template2" type="text/x-handlebars-template">
{{! 这个是模版的注释 }}
{{#list people}}{{firstName}} {{lastName}}{{/list}}
</script>
<script>
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于⼀个编译的函数*/
}
return out + "</ul>";
});
var source = $("#entry-template2").html();
var template = Handlebarspile(source);
var context = {
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
};
var html = template(context);
</script>
</body>
</html>
Handlebars次级数据的渲染
Handlebars⽀持简单的下级对象获取和上级对象获取, 跟 Mustache⼀样样的.
<p>{{name}}</p>
Handlebars 也⽀持多层次的数据展⽰, 模版如下.
<div class="entry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">
{{body}}
</div>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论