(二)Handlebars练习
- Handlebar遍历后台返回的数据
- 使用{{#each data}}{{/each}}进行遍历
- 遍历student对象
{{#each student}} <tr> <td>{{id}}</td> <td>{{age}}</td> <td>{{nickName}}</td> </tr> {{/each}}
- 遍历student对象
- @index索引
- 使用@index显示序号,序号从0开始
{{#each student}} <tr> <td>{{@index}}</td><!--Handlebars中的索引--> </tr> {{/each}}
- 使用@index显示序号,序号从0开始
- 访问对象的子对象
- 使用userInfo.hobby来获取user对象的子对象信息
{{#each student}} <tr> <td>{{userInfo.hobby}}</td> </tr> {{/each}}
- 使用userInfo.hobby来获取user对象的子对象信息
- 访问对象的父对象
- 使用../访问user对象的上级对象
{{#each student}} <tr> <td>{{../name}}</td><!--取上一级的数据--> </tr> {{/each}}
- 使用../访问user对象的上级对象
- 使用{{#each data}}{{/each}}进行遍历
- Handelbar中的registerHelper
- 自定义helper
- 给所以+1,让索引从1开始显示
//给索引+1 Handlebars.registerHelper('addOne',function(index){ return index+1; });
调用
<td>{{addOne @index}}</td>
- 给所以+1,让索引从1开始显示
- 自定义helper
- 条件控制
- 使用if进行判断
- 显示年龄<26或者等于26的学生
{{#if (filterAge age)}} <tr> <td>{{age}}</td> </tr> {{/if}}
Github源码下载地址:https://github.com/supermanxkq/Handlebas_test.git
- 显示年龄<26或者等于26的学生
- 使用if进行判断