js-模板引擎handlebars.js

1.使用环境

1. A RequireJS/AMD loader plugin for loading text resources.：https://github.com/requirejs/text

2. require:https://github.com/requirejs

3. jquery

2.基本结构实例

js部分

define(function(require) {
      var Handlebars = require('handlebarsWithHelper'); //handlebars
      //插入页面的模块
      var Tpl = require('text!/account/template/template.html'); 

     $.ajax({
      url: "/shops/modifyShop",
      type: "POST",
      data: data,
      success: function(res) {
            //注册一个Handlebars模版
            var tpl = Handlebars.compile(Tpl);
            //将json对象用刚刚注册的Handlebars模版封装，得到最终的html
            $('.js-info').html(tpl({data:res.data}));
      }
    });
});

config.js配置

template.html

{{data.name}}
{{data.age}}

index.html

  
  
  
  //css 


  

    

  
    // js 
    

3. 相关语法

3.1 插值

{{name}} 

3.2 循环

   var  student = [{name:"zhang",sex:"男",age:22},{name:"",sex:"",age:""}]；
    {{#each student}}
         {{name}}
         {{sex}}
         {{age}}
     {{/each}};

3.3 with:进入某个上下文环境

  {{#each data}}
          
            {{name}}
            {{#with favorite}}
                 {{#each this}}
                  
{{name}}
                {{/each}}
            {{/with}}
        
  {{/each}}
  var data = [{name:"zhanglinyu",favorite:[{name:"羽毛球"},{name:"跑步"}]},{name:"zzz"},favorite:[{name:"222"}]]；

3.4 if条件
undefined、null、""、[]、false 等都为假

     {{#if name}}
        ....
     {{else}}
      ....
     {{/if}}

3.4 helper

Handlebars可以自己注册一些模板语法。
Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，最后一个参数是固定的，就叫options，

• 如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。{{#}}
• 如果没有加，则属于行内级别的Helper。就不需要加#。{{}}

  var Handlebars = require('handlebars');
  Handlebars.registerHelper('compare', function(left, operator, right, options) {
    if (arguments.length < 3) {
     throw new Error('Handlerbars Helper "compare" needs 2 parameters');
    }
    var operators = {
     '==':     function(l, r) {return l == r; },
     '===':    function(l, r) {return l === r; },
     '!=':     function(l, r) {return l != r; },
     '!==':    function(l, r) {return l !== r; },
     '<':      function(l, r) {return l < r; },
     '>':      function(l, r) {return l > r; },
     '<=':     function(l, r) {return l <= r; },
     '>=':     function(l, r) {return l >= r; },
     'typeof': function(l, r) {return typeof l == r; }
    };
    if (!operators[operator]) {
     throw new Error('Handlerbars Helper "compare" doesn\'t know the operator ' + operator);
    }
    var result = operators[operator](left, right);
    if (result) {
     //满足条件执行
     return options.fn(this);
    } else {
     //不满足条件执行
     return options.inverse(this);
    }
  });

使用

 
        是 
 
 
        否
 

使用

//注册一个翻译用的Helper，0翻译成男，1翻译成女

   Handlebars.registerHelper("transformat",function(value){
        if(value==0){
          return "男";
        }else if(value==1){
          return "女";
        }
    });

使用

   {{transformat sex}}