Handlebars练习

Posted 2020-09-26 梦者

• Handlebar遍历后台返回的数据
  • 使用{{#each data}}{{/each}}进行遍历
    • 遍历student对象
      

      {{#each student}}
          <tr>
              <td>{{id}}</td>
              <td>{{age}}</td>
              <td>{{nickName}}</td>
          </tr>
       {{/each}}
      

      　　

  • @index索引
    • 使用@index显示序号，序号从0开始

      {{#each student}}
          <tr>
              <td>{{@index}}</td><!--Handlebars中的索引-->
          </tr>
          {{/each}}

  • 访问对象的子对象
    • 使用userInfo.hobby来获取user对象的子对象信息
      

      {{#each student}}
          <tr>
              <td>{{userInfo.hobby}}</td>
          </tr>
          {{/each}}　　

  • 访问对象的父对象
    • 使用../访问user对象的上级对象

      {{#each student}}
          <tr>
              <td>{{../name}}</td><!--取上一级的数据-->
          </tr>
          {{/each}}

• Handelbar中的registerHelper
  • 自定义helper
    • 给所以+1，让索引从1开始显示

       //给索引+1
              Handlebars.registerHelper(‘addOne‘,function(index){
                  return index+1;
              });
      

      调用

       <td>{{addOne @index}}</td>

• 条件控制
  • 使用if进行判断
    • 显示年龄<26或者等于26的学生

      {{#if (filterAge age)}}
          <tr>
              <td>{{age}}</td>
          </tr>
          {{/if}}
      

      还有其他的条件控制，自己学习一下吧，这里不再赘述。