1.使用環(huán)境
A RequireJS/AMD loader plugin for loading text resources.：https://github.com/requirejs/text
require:https://github.com/requirejs
jquery
2.基本結(jié)構(gòu)實(shí)例
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. 相關(guān)語法
3.1 插值
<td>{{name}}</td>
3.2 循環(huán)
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:進(jìn)入某個上下文環(huán)境
{{#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，它有兩個參數(shù)，第一個參數(shù)是Helper名稱，第二個參數(shù)是一個回調(diào)函數(shù)，用來執(zhí)行核心業(yè)務(wù)邏輯。本例中的函數(shù)，有三個參數(shù)，其中前兩個參數(shù)是需要比較的兩個數(shù)，最后一個參數(shù)是固定的，就叫options，
- 如果加了該參數(shù)，就說明這個Helper是一個Block，塊級別的Helper，有一定的語法結(jié)構(gòu)，調(diào)用的時候加#號，就像if那樣。{{#}}
- 如果沒有加，則屬于行內(nèi)級別的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) {
//滿足條件執(zhí)行
return options.fn(this);
} else {
//不滿足條件執(zhí)行
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>
