handlebar的一些用法
概述与介绍
- Handlebars 是 JavaScript 一个语义模板库，经过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样能够保证模板加载和运行的速度。
- 简单的说就是：Handlebars是一个很好的先后端的分离的方案
使用
Handlebars的安装是比较简单和方便的;handlebars是一个纯JS库，所以你能够像使用其余JS脚本同样用script标签来包含handlebars.jsjavascript
<script src="jquery.min.js"></script> <script type="text/javascript" src=".js/handlebars.js"></script>
基本
将对象数据渲染到页面上php
- js代码
//用jquery获取模板 var tpl = $("#tpl").html(); //预编译模板 var template = Handlebars.compile(tpl); //模拟json数据 var context = { name: "XXX", content: "this is Handlebars"}; //匹配json内容 var aaa = template(context); //输入模板 $("#wrap").html(aaa);
- 模板结构
<script id="tpl" type="text/x-handlebars-template"> <div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div> </script>
Handlebar的表达式
block
有时候当你须要对某条表达式进行更深刻的操做时，Blocks就派上用场了，在Handlebars中，你能够在表达式后面跟随一个#号来表示Blocks，而后经过{{/表达式}}来结束Blocks。 若是当前的表达式是一个数组，则Handlebars会“自动展开数组”，并将Blocks的上下文设为数组中的元素。css
<ul> {{#arr_data}} <li>{{language}}</li> {{/arr_data}} </ul>
如下为json数据html
{
arr_data: [ {language: "hello"}, {language: "word"}, {language: "handlebars"} ] }
上面的代码会自动匹配arr_data数据并展开数据java
if/else AND unless
Handlebars的if判断只能判断true和false，没办法进行这种a===10的逻辑判断。jquery
#模板 {{#if isTrue}} <p>isTrue</p> {/if}} {{#if email}} <p>{{email}}</p> {{else}} <p>is not email</p> {{/if}} {{#if num}} <p>{{num}}</p> {{/if}} {{#if data1}} {{else}} <p>没有这个字段</p> {{/if}} #json数据 { isTrue: true, email: '', num: '0' }; #页面效果 isTrue is not email 0 没有这个字段
说明：django
- Handlebars if在判断前会作类型转换，如''、undefined、null、0、[]等都会被识别为false。不过，上面的例子中的'0'是字符串，因此仍是会显示的。
- if能够判断是否含有某个字段，若是没有执行else的内容
- unlesee和if正好相反，当是false的时候执行; 是true的时候执行else里面的内容
with
{{#with}}通常状况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，咱们能够将context转移到数据的一个section里面（若是你的数据包含section）。这个方法在操做复杂的template时候很是有用。【简单的说就是，with能够判断这几数据有没有; 我的感受和if挺像的】json
{{#with author}} 有author就显示里面的内容，没有就不显示 {{/with}}
Handlebar的访问(PATH)
Handlebar支持路径访问,Handlebar还支持嵌套的路径，使得可以查找嵌套低于当前上下文的属性
能够经过.来访问属性也可使用../,来访问父级属性。 例如:（使用.访问的例子）【常常搭配着with一块儿用的】segmentfault
#模板 <h1>{{author.id}}</h1> #json { title: "this is title", author: { id: 47, name: "XXX" }, body: "this is body" }
遍历each
遍历能够算是一个最经常使用的功能，对于不少数据的展现都是须要用到each的。Handlebar的遍历对于数组和对象都适用。后端
#模板 {{#each this}} <p>{{this.name}}:{{this.age}}</p> {{else}} <p>no data</p> {{/each}} #json [ {name: 'aaa', age: 23 }, {name: 'bbb', age: 55 } ]
遍历的一些小技巧
- @index或者@key均可以得到序号，可是序号都是从0开始的，若是须要从1开始须要写一个helper; @key还可得到对象的索引值
- @first和@last能够判断是不是数组的第一个或者最后一个。
Html转义
有时候，后台传来的一篇文章是富文本内容，而咱们想要将其转换为htnl输出怎么办呢？“{{}}”输出默认转义Html，几乎全部的模板引擎输出默认都是转义Html的，避免xss攻击。若是你想避免转义，请这样用“{{{}}}”
#模板 <div>{{richText}}</div> <div>{{{richText}}}</div> #数据 var data = { richText: '<div>this is content</div>' };
Helpers
- 后台传来的数据每每是须要作处理的，如时间格式化、金额格式化、索引值的开始，甚至一些状态的操做; 那么这个时候就须要Helper了，这个是Handlebar中最主要的功能，由于它才使得Handlebar那么的好用。
#模板 <p>{{format time}}</p> #Helpers Handlebars.registerHelper('format', function (date, options) { return new Date(date).toLocaleString(); }); #数据 {"time":1450576000281}
- 在Helper里也能作一些判断，而后在页面上使用else判断；
经过return options.fn(this)返回true的结果，
经过return options.inverse(this)返回else要执行的内容
#模板 {{#equal data1 data2}} <p>两个数相等</p> {{else}} <p>不相等</p> {{/equal}} #js Handlebars.registerHelper("equal",function(v1,v2,options){ if(v1 == v2){ //知足添加继续执行 return options.fn(this); }else{ //不知足条件执行{{else}}部分 return options.inverse(this); } });
- 在Helper里Handlebars.SafeString就是不转义Html，若是想转义Html直接return内容便可。
#模板 <p>{{safe}}</p> #js Handlebars.registerHelper('safe', function () { return new Handlebars.SafeString('<div>safe string</div>') });
Handlebar的注释
Handlebars也可使用注释写法以下
{{! 单行注释 }}
{{!-- 多行注释 --}}
Partials
共享同一个模板内容，有些公共部分但愿一次书写，而后就能重复使用了；相似一些include的功能; 不须要也能调用Helper的方法
#模板 <p>{{> footer}}</p> #Helper Handlebars.registerPartial('footer', function () { return new Handlebars.SafeString('<div>This is footer</div>') });
其余
Handlebars官网的不少内置的helper以及功能能够参考看一下Handlebars官网,入门有时候仍是容易的，可是深刻学习须要的时间和经验。