当前位置: 首页 > 工具软件 > Handlebars > 使用案例 >

关于handlebars的学习

颜光临
2023-12-01
要点:
     Handlebars expression
     可以理解为Handlebars模板中用到的表达式。如:
[html] view plain copy
  1. <span>{{value}}</span>  
     形式为用两个花括号包围起来的表达式。value可以是普通数据类型,也可以是函数,为函数时则返回函数的返回值,函数返回undefined时则返回空字符串。Handlebars也有this,this表示当前的对象,调用this的属性的值时直接写属性名即可。如:
[html] view plain copy
  1. <span>{{value}}</span>  
     实际上value的完整写法是this.value。这里又涉及到了一个要点——Handlebars Path
     Handlebars Path
     handlebars模板支持点操作符(".")。与在JS代码中一样,点操作符(".")表示对象的属性,如:
[html] view plain copy
  1. <span>{{module.path}}</span>  
     数据对象为:
[javascript] view plain copy
  1. {  
  2.      module:{  
  3.           path:"./path"  
  4.      }  
  5. }  
     另外,也可以用"../"的形式表示返回当前对象的上级对象环境。如:
[html] view plain copy
  1. <span>{{../module.path}}</span>  
     数据对象为:
[javascript] view plain copy
  1. {  
  2.      export:{  
  3.           name: "module"  
  4.      },  
  5.       module:{  
  6.           path:"../path"  
  7.      }  
  8. }  
     Handlebars Block
     类似于js中的作用域块。形式为:
[html] view plain copy
  1. {{#obj}}...{{/obj}}  
     如上时,则在两个表达式之间形成了一个块,在这个块中,this就是obj,故对于需要写为{{obj.mission}}的语法,则可以写为
[html] view plain copy
  1. {{#obj}}{{mission}}{{/obj}}  
     Handlebars Block Helper
     Handlebars内定了一些简单的逻辑帮助使用者。
          1. if block helper
                    用法形式如下:
[html] view plain copy
  1. {{#if this}}  
  2.      ...  
  3. {{else}}  
  4.      ...  
  5. {{/if}}  
                    需要注意的是,{{#if expression}}中的expression不能有运算符,只能是数据类型,expression为true时(参考js中其他数据类型转化为boolean类型的规则)。其它的else等不用讲。
          2. unless block helper
                   用法形式如下:
[html] view plain copy
  1. {{#unless this}}  
  2.       ...  
  3. {{else}}  
  4.       ...  
  5. {{/unless}}  
                  与if的差别类似于if(condition)和if(!condition)的区别。
          3. each block helper
                    用法形式如下:
[html] view plain copy
  1. {{#each array}}  
  2.        ...  
  3. {{/each}}  
                    遍历数组array中的元素,并将该block中的this对象赋值为当前遍历的的元素。其实直接{{#array}}...{{/array}}也是一样的效果,但原理不一样,区别暂时还不清楚。
          4. with block helper
                    用法形式如下:
[html] view plain copy
  1. {{#with obj1}}  
  2.        ...  
  3. {{/with}}  
                    作用暂时没发现与{{#obj1}}{{/obj1}}有什么不同。
     Handlebars Partial
          Handlebars还提供了将一个父模板分为几个子模板的功能,也就是可以将几个子模板组合为一个父模板,这提高了编写模板的灵活度(除了在父模板里指定子模板外,子模板与父模板之间没有任何关联,耦合度非常低)。
          首先是注册一个子模板
[javascript] view plain copy
  1. Handlebars.registerPartial("child", $(".child-tmpl").html());  
               第一个参数为子模板的名称,方便在父模板中调用,第二个参数为子模板的主体,即子模板所在的script的内容。
          接着便是在父模板中调用了
[html] view plain copy
  1. {{#parent}}  
  2.      ...  
  3.      {{> child}}  
  4.      ...  
  5. {{/parent}}  
  6. {{> child}}  
               调用子模板的形式是{{> 子模板名称}},子模板可在父模板的任何地方调用。
     Handlebars registerHelper
          Handlebars提供的一个扩展功能,供使用者除了使用内建的几个helper(if else/each/with/unless)之外,用户还可以自定义各种helper。可自定义的helper分为两种,一种为expression helper,一种为 block helper。
          1. expression helper
               是一种以表达式形式使用的helper
               首先是自定义helper:
[javascript] view plain copy
  1. Handlebars.registerHelper("expressionHelperName"function(arg1 [, argn]){});  
               之后便可以在模板中调用:
[html] view plain copy
  1. {{functionHelperName arg1 ... argn}}  
               多个参数之间用空格隔开,返回函数的返回值。函数的执行环境为具体调用该function helper时所处的上下文
          2. block helper
               使用时能形成上下文区域的helper,很有扩展性的功能。
               首先仍然是注册一个helper
[javascript] view plain copy
  1. Handlebars.registerhelper("blockHelperName"function(arg1[, argn], options){//arg为传入的参数,option为Handlebars内建的一个对象,不用传入。  
  2.      ...  
  3.      stack += option.fn(target); //stack为在本函数内定义的一个变量,为String格式,变量名随便,只要返回该值就行。target一般为数据对象。这样写的原因后面会说到。  
  4.      return stack; //返回的值,必须为字符串。  
  5. })  
               接着是模板代码
[html] view plain copy
  1. {{#blockHelperName this}}  
  2.      code  
  3. {{/blockHelperName}}  
                    在blockHelperName中的代码会被传入到注册blockHelperName时创建的函数中。在opiton.fn(target)中会被作为模板文件传入,target则作为该模板文件的this上下文,而option.fn(target)返回的是已经带有数据的html字符串。所以最后返回的stack就是已经完成编译的html代码。之后会将这些代码放置在code所在位置。之后继续编译该blockHelper之外的内容。
 类似资料: