handlebars使用

template

        形如：

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

block：

它是模板里形如{{#xxx}}...{{/xxx}}的单元，经过编译后，block包含的相关信息被处理后保存到helper的options里。

helper的options对象包含如下字段：

• data：可以在渲染模板时，将其传进去，如template(context, {data: data})
  
• hash：保存写模板时，可以将一些值以key-value对的形式传进去
  
• fn：方法，官方解释说“options.fn的可以被认为是被编译过的普通handlebars模板，它的调用的执行环境被认为是‘this’，所以你可以把this作为执行上下文去调用它”
  
• inverse：给if的block的else来用的
  

block与helper关系：

block处理数据后，传给helper做二次处理。

例如这么个例子：

模板：

{{#sort ages id="ages-list" class="con" }}
      <span>{{@name}}:{{this}}</span>
{{/sort}}

helper：

Handlebars.registerHelper("sort",function(context,options){
		    var i = 0,str="<div id="+ options.hash.id +" class="+ options.hash.class +">"; 
			for(;i<context.length;i++){
			   str+=options.fn(context[i],{data:{name:options.data[i]}});
			}
			str+="</div>";
			return str;
		});

数据源及渲染：

var template = Handlebars.compile($("#people-template").html());
var temp = {ages:[23,24,56,64]}
var result = template(temp,{data:["tom","jak","lili","jim"]});

/*result:
<div id="ages-list" class="con">
<span>jak:24</span>  
<span>lili:56</span>  
<span>jim:64</span> 
</div>

下面解析数据处理及传递过程：

• 闭环体被包装成一个方法保存到helper的options.fn，在例子模板中“<span>{{@name}}:{{this}}</span>”，将会封装进options.fn中；
• 在写block时，可以将一些值以key-value对的形式传进去,这些键值对将会保存在helper的options.hash中，供helper使用。那么在上例中，options.hash的值为{id:"ages-list",class:"con"}；
• options.data的数据来自渲染模板时，传进去的数据。在例子中是表现在这句话：template(temp,{data:["tom","jak","lili","jim"]})。那么它是用来替换模板中形如{{@...}}这种写法的占位符。在例子中体现的是 <span>{{@name}}:{{this}}</span>和str+=options.fn(context[i],{data:{name:options.data[i]}});

转义：

• 默认handlebars会对html标签符号进行转义（html-escapes）(转义后，浏览器则不对字符串进行标签解释，则作为普通字符串)，如果你不想让其转义，请使用三个{}-{{{expression}}}(triple-stach)；
  
• handlebars还提供了2个手动对符号转义的方式，一个是Handlebars.Utils.escapeExpression(result)，另一个是new Handlebars.SafeString(result)，这2者的区别是：如果表达式使用的是triple-stach,那么前者还会进行转义，而后者不会。
  

写法上的注意点：

• 如果一个表达式没有内容，只是返回一个字符串，则不用写闭环的形式，可以只开不闭。例如：

{{#link data}}

{{/link}}

可以简写为(井号都不用写了)：

{{link data}}

参数传递：

1、模板函数调用时，除了传数据源（context）进去外，还一个传递一个对象（options）进去。

        context，那自然是渲染模板用的数据源。可以有多个context。

        options，可以包含以下字段：

             data，是对象类型。可以把需要的值通过data传到模板函数里;

             helpers，是对象类型。除了通过registerHelper，定义全局helper外，你可以传递私有helper，只在这次的block里起作用。

             partials，是对象类型。和helpers作用类似，可以传递私有partial。

2、在引用partials 可以改变作用域，也可以传参,并且都可以使用路径来实现。eg:

start:
{>partialName foo bar = 'test' temp=..}
end

参考：

 官网

github-master

treehouse给出的关于handlebasr的debug和动态更新页面信息的2个helper