handlebars踩坑之旅

cjie 发布于2019-08-22 13:59 / 1983人阅读

摘要：的使用方法遍历数组或者对象刀歌云数组遍历时索引值为对象为判断是否有传参有的话使用传参的值没有的话使用默认值判断对应适用数据数据取出错误这里判断是否存在数组，如果存在则遍历，如果不存在输出错误信息判断是否是第一个或者是

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}}

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

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

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

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}}

GPU云服务器云服务器学习之旅 handlebar handlebars handlebars cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92734.html

weex踩坑之旅第二弹 ~ 在weex中集成vue-router

摘要：也就是说在中，我们的代码是要在环境中运行。而在中，是没有等以及的，即所有的框架都是不可以使用的。比如相关组件，相关组件，等都不能在中引用。是可以在中使用的。接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-a...

tyheist 2019-08-21 18:25 评论0 收藏0
前端踩坑之旅

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。文本溢出处理 1. 单行文本溢出显示省略号 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: nowrap; （设置文字在...

W4n9Hu1 2019-08-02 15:31 评论0 收藏0
前端踩坑之旅

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。文本溢出处理 1. 单行文本溢出显示省略号 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: nowrap; （设置文字在...

Flands 2019-08-23 18:38 评论0 收藏0
前端踩坑之旅

摘要：如果任一参数小于或是，它被视为为。如果是正的并且大于或等于字符串的长度，则返回一个空字符串。若为负数则将该值加上字符串长度后再进行计算如果加上字符串的长度后还是负数，则从开截取。如果为负，它被视为其中是字符串的长度。文本溢出处理 1. 单行文本溢出显示省略号 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: nowrap; （设置文字在...

amc 2019-08-30 11:22 评论0 收藏0