1.使用环境
-
A RequireJS/AMD loader plugin for loading text resources.：https://github.com/requirejs/text
-
require:https://github.com/requirejs
-
jquery
2.基本结构实例
js部分
define(function(require) {
var Handlebars = require('handlebarsWithHelper'); //handlebars
//插入页面的模块
var Tpl = require('text!/account/template/template.html');
$.ajax({
url: "/shops/modifyShop",
type: "POST",
data: data,
success: function(res) {
//注册一个Handlebars模版
var tpl = Handlebars.compile(Tpl);
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html
$('.js-info').html(tpl({data:res.data}));
}
});
});
config.js配置
template.html
<div>{{data.name}}</div>
<div>{{data.age}}</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<title></title>
//css <link />
</head>
<body>
<div id="app">
<div class="js-info"></div>
</div>
// js <script></script>
<script src="/js/pages/config.js"></script>
</body>
</html>
3. 相关语法
3.1 插值
<td>{{name}}</td>
3.2 循环
var student = [{name:"zhang",sex:"男",age:22},{name:"",sex:"",age:""}]；
{{#each student}}
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
{{/each}};
3.3 with:进入某个上下文环境
{{#each data}}
<tr>
{{name}}
{{#with favorite}}
{{#each this}}
<p>{{name}}</p>
{{/each}}
{{/with}}
<tr>
{{/each}}
var data = [{name:"zhanglinyu",favorite:[{name:"羽毛球"},{name:"跑步"}]},{name:"zzz"},favorite:[{name:"222"}]]；
3.4 if条件
undefined、null、""、[]、false 等都为假
{{#if name}}
....
{{else}}
....
{{/if}}
3.4 helper
Handlebars可以自己注册一些模板语法。
Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，最后一个参数是固定的，就叫options，
- 如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。{{#}}
- 如果没有加，则属于行内级别的Helper。就不需要加
#。{{}}
var Handlebars = require('handlebars');
Handlebars.registerHelper('compare', function(left, operator, right, options) {
if (arguments.length < 3) {
throw new Error('Handlerbars Helper "compare" needs 2 parameters');
}
var operators = {
'==': function(l, r) {return l == r; },
'===': function(l, r) {return l === r; },
'!=': function(l, r) {return l != r; },
'!==': function(l, r) {return l !== r; },
'<': function(l, r) {return l < r; },
'>': function(l, r) {return l > r; },
'<=': function(l, r) {return l <= r; },
'>=': function(l, r) {return l >= r; },
'typeof': function(l, r) {return typeof l == r; }
};
if (!operators[operator]) {
throw new Error('Handlerbars Helper "compare" doesn\'t know the operator ' + operator);
}
var result = operators[operator](left, right);
if (result) {
//满足条件执行
return options.fn(this);
} else {
//不满足条件执行
return options.inverse(this);
}
});
使用
<label>
<input type="radio" required name="almostNew" value="true" {{#compare almostNew "==" 1}}checked{{/compare}}> 是
</label>
<label>
<input type="radio" required name="almostNew" value="false" {{#compare almostNew "==" 0}}checked{{/compare}}> 否
</label>
使用
//注册一个翻译用的Helper，0翻译成男，1翻译成女
Handlebars.registerHelper("transformat",function(value){
if(value==0){
return "男";
}else if(value==1){
return "女";
}
});
使用
<td>{{transformat sex}}</td>
网友评论