handlebars踩坑之旅

1. each的使用方法(遍历数组或者对象)

    {{include "tpl/components/page3-school-slide/each-slide"
      data='[
          { 
            "name": "badao", 
            "word": "刀"
          }, {
            "name": "changge",
            "word": "歌"
          }, {
            "name": "cangyun",
            "word": "云"
          }
      ]'
        
    }}
      

    {{#each data}}
      

        {{include "tpl/components/page3-school-slide/index"
                  name=this.name
                  word=this.word
        }}
      
    {{/each}}
    
    
    {{#each data}}
      

        
     
    {{/each}}

2. 判断是否有传参, 有的话使用传参的值, 没有的话使用默认值

    {{#unless ns}}
        {{var ns = 'xxx'}}
    {{/unless}}

3. if else 判断

    {{#if list}}
    
  
        {{#each list}}
            
{{this.name}}
        {{/each}}
    
  
    {{else}}
        
{{error}}
    {{/if}}
    
    
    
    //对应适用json数据
    var data = {  
        info:['HTML5','CSS3',"WebGL"],
        "error":"数据取出错误"
    }
    
    这里{{#if}}判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息

4. each 判断是否是第一个或者是最后一个

    
    
    {{#each list}}
        ```
        {{#if @first}}  //{{#if @last}}
          ```
        {{else}}
         ```
        {{/if}}
        ```
    {{/each}}
    
    {{#each list}}
      

        

          

            

              
            
            {{#if @first}}
              
{{this.method-type-text}}
            {{else}}
              
{{this.method-type-text}}
            {{/if}}
            
{{this.method-type-introduce}}
          
        
      
    {{/each}}

1. 遍历时给指定的某个值进行特殊处理(使用比较方法)

{{#compare  name "==" "changge"}}
  do something
{{else}}
  do something else
{{/compare}}

{{#each data}}
  {{#compare this.num "==" 1}}
    

      
    
  {{else}}
    

      
    
  {{/compare}}
{{/each}}

1. content block 内容嵌套

// 外层
{{var ns = "layout-wrapper"}}
{{#extend "tpl/layouts/base-layout" }}
    {{#block "body"}}
      
    {{/block}}
{{/extend}}


// 内层:
{{#extend "tpl/layouts/index" title="标题"}}
  {{#content "body"}}
    {{var ns = "index"}}
    
    {{include "tpl/components/swiper/index"}}
    
插入的页面内容
 
  {{/content}}
{{/extend}}