您的位置：首页 > Web前端 > JavaScript

js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

2014-08-08 19:32 666 查看

我们发现，Handlebars的模板标签中，{{#if condition}}{{/if}}只能判断这个condition是否为true和false，并不能判断是否等于某个特定的值。

我们可以借助Handlebars的registerHelper方法来实现。

<!DOCTYPE html>

<html>

<head>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<title>由于if功力不足引出的Helper - by 杨元</title>

</head>

<body>

<h1>由于if功力不足引出的Helper</h1>



<table>

<thead>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

</thead>

<tbody id="tableList">

</tbody>

</table>



<script type="text/javascript" src="script/jquery.js"></script>

<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>







<script id="table-template" type="text/x-handlebars-template">

{{#each student}}

{{#if name}}

{{#compare age 20}}

<tr>

<td>{{name}}</td>

<td>{{sex}}</td>

<td>{{age}}</td>

</tr>

{{else}}

<tr>

<td>?</td>

<td>?</td>

<td>?</td>

</tr>

{{/compare}}

{{/if}}

{{/each}}

</script>



<script type="text/javascript">

$(document).ready(function() {

//模拟的json对象

var data = {

"student": [

{

"name": "张三",

"sex": "0",

"age": 23

},

{

"sex": "0",

"age": 22

},

{

"name": "妞妞",

"sex": "1",

"age": 18

}

]

};

//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

var myTemplate = Handlebars.compile($("#table-template").html());

//注册一个比较大小的Helper,判断v1是否大于v2

Handlebars.registerHelper("compare",function(v1,v2,options){

if(v1>v2){

//满足添加继续执行

return options.fn(this);

}else{

//不满足条件执行{{else}}部分

return options.inverse(this);

}

});

//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

$('#tableList').html(myTemplate(data));

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航