Handlebarsjs学习笔记

handlebarsjs官网（http://handlebarsjs.com/）
 
1.引入模板
 
    在html页面中添加
    <script id="entry-template" type="text/x-handlebars-template"> template content</script>
    
    var source = $("#entry-template").html();     // 获取模板内容
    var template = Handlebars.compile(source);     //将模板编译成模板函数
    var htmlStr = template (context) ;     //  传入上下文对象 输出html字符串
 
    模板函数可传入一个可选对象作为第二参数
    var htmlStr = template (context,opt) ;   
 
    data:传入此对象，用于自定义私有变量
    helpers：出入助手，在运行时会替换权限同名的助手
    partials： Pass in to provide custom partials in addition to the globally defined partials.
 
 
    预编译
 
    npm install handlebars -g
 
    handlebars <input> -f <output>
 
    编译器会将inputFile(如person.hbs)编译成模板函数，然后插入到Handlebars.templates中即Handlebars.templates.person
 
    Handlebars.templates.person(context, options)
 
    如果使用预编译的话 可以直接引入handlebarjs的原型依赖库
    <script src="/libs/handlebars.runtime.js"></script>
 
    预编译可选参数
    handlebars <input> -f <output> -k each -k if -k unless
 
      
 
2.表达式
 
    <h1>{{title}}</h1>     // 会在当前上下文中寻找title属性
 
    <h1>{{article.title}}</h1>     会在当前上下文中寻找属性article，然后在查找结果中找title属性
 
    <h1>{{article/title}}</h1>  // 也可以这样使用（此用法不建议使用 已废弃）
 
    标识符 不能是 Whitespace ! " # % & ‘ ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~
 
    如果想引用一个属性但是它的名称不是合法的标识符，可以用[]访问，比如：
 
    {#each articles.[10].[#comments]}}

    <h1>{{subject}}</h1>

    <div> {{body}} </div>

    {{/each}}

    传入each的参数  articles.[10].[#comments] 等价于js对象 articles[10][‘#comments‘]
    

    HTML转义 {{{ expression  }}}  使用3个大括号可防止html自动转义
 
    
    {{{link story}}}
 
        Handlebars.registerHelper(‘link‘, function(object) {

        var url = Handlebars.escapeExpression(object.url),          // 使用escapeExpression方法 防止自动转义

          text = Handlebars.escapeExpression(object.text);

        return new Handlebars.SafeString(

        "<a href=‘" + url + "‘>" + objecttext + "</a>"

        );});

    

    {{{link "See more..." href=story.url class="story"}}}     // 助手添加键值对参数  可通过助手的最后一个参数options.hash获取

    Handlebars.registerHelper(‘link‘, function(text, options) {
      var attrs = [];

      for (var prop in options.hash) {
        attrs.push(
            Handlebars.escapeExpression(prop) + ‘="‘
            + Handlebars.escapeExpression(options.hash[prop]) + ‘"‘);
      }

      return new Handlebars.SafeString(
        "<a " + attrs.join(" ") + ">" + Handlebars.escapeExpression(text) + "</a>"
      );
    });

    

    表达式嵌套

    {{outer-helper (inner-helper ‘abc‘) ‘def‘}}

    先会执行inner-helper助手 然后将其返回结果作为outer-helper的第一个参数

    空格控制 （使用 ~ 去掉左右的空格）

    {{#each nav ~}}
      <a href="{{url}}">
        {{~#if test}}
          {{~title}}
        {{~^~}}
          Empty
        {{~/if~}}
      </a>{{~/each}}

    上下文对象

    {
      nav: [
        {url: ‘foo‘, test: true, title: ‘bar‘},
        {url: ‘bar‘}
      ]
    }

    输出结果

    <a href="foo">bar</a><a href="bar">Empty</a>

3.块级表达式 （会改变上下文对象）

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

    
    Handlebars.registerHelper(‘noop‘, function(options) {
        return options.fn(this);     // 可以在助手里直接使用 this (指代当前上下文对象)
    });

    Handlebars.registerHelper(‘if‘, function(conditional, options) {
           if(conditional) {
                 return options.fn(this);
            } else {
                  return options.inverse(this);
            }
        });

    
    助手函数默认有最后一个参数options，options.fn 会渲染助手的内容，如果助手含有else部分可以调用options.inverse（context）


4.handerbarjs 路径 （使用../ 查找上层作用域中的属性）

    <p>{{./name}} or {{this/name}} or {{this.name}}</p>

5.注释

     {{！--  log   --}}  或 {{！ log  }}

6.常用api

    a.添加助手

        Handlebars.registerHelper(‘foo‘, function() {      });

         // 一次性添加多个助手

        Handlebars.registerHelper({

              foo: function() {

              },

              bar: function() {

              }

        });


    b.注销助手

        Handlebars.unregisterHelper(‘foo‘);

        
    c.安全字符串转化，防止字符串注入   // 防止文本被自动转义
        new Handlebars.SafeString(‘<div>HTML Content!</div>‘)

    d.html转义
        Handlebars.escapeExpression(string)
        原样输出html内容 ，将&, <, >, ", ‘, `转化成等价的实体字符串
        
    e.判断是否是数组的第一个元素@first   (@last 判断是否是数组的最后一个元素)

        {{#each array}}
            {{#if @first}}
                First!
            {{/if}}
        {{/each}}
        
        {{#each array}}
            {{#if @last}}
                Last :(
            {{/if}}
        {{/each}}

    f.通过 @index 可在模板中直接使遍历数组的下标

        {{#each array}}
            {{@index}}
        {{/each}}
        
    g.通过@key遍历对象的属性
        {{#each array}}
            {{@key}}
        {{/each}}