js-模板引擎handlebars.js

2017-04-19 本文已影响201人 overflow_hidden

1.使用环境

A RequireJS/AMD loader plugin for loading text resources.：https://github.com/requirejs/text
require:https://github.com/requirejs
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

<div>{{data.name}}</div>
<div>{{data.age}}</div>

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="">
  <title></title>
  //css <link />
</head>
<body>
  <div id="app">
    <div class="js-info"></div>
  </div>
    // js <script></script>
    <script src="/js/pages/config.js"></script>
</body>
</html>

3. 相关语法

3.1 插值

<td>{{name}}</td>

3.2 循环

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

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

  {{#each data}}
        <tr>  
            {{name}}
            {{#with favorite}}
                 {{#each this}}
                  <p>{{name}}</p>
                {{/each}}
            {{/with}}
        <tr>
  {{/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);
    }
  });

使用

 <label>
       <input type="radio" required name="almostNew" value="true" {{#compare almostNew "==" 1}}checked{{/compare}}> 是 
 </label>
 <label>
       <input type="radio" required name="almostNew" value="false" {{#compare almostNew "==" 0}}checked{{/compare}}> 否
 </label>

使用

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

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

使用

   <td>{{transformat sex}}</td>

js-模板引擎handlebars.js

1.使用环境

2.基本结构实例

猜你喜欢

热点阅读