Handlebars是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。

2.参考文章:

    Handlebars官网:http://handlebarsjs.com/

    Handlebars中文介绍(王赛):http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

    Handlebars中文文档 - 块级helpers(译自官方版):https://segmentfault.com/a/1190000000347965

    Handlebars.js 中文文档:http://keenwon.com/992.html

    js模版引擎handlebars.js实用教程:http://www.cnblogs.com/iyangyuan/p/3471227.html

    handlebars玩家指南:http://cnodejs.org/topic/56a2e8b1cd415452622eed2d

    com.github.jknack.handlebars.Helper:http://www.programcreek.com/java-api-examples/index.php?api=com.github.jknack.handlebars.Helper

 

3.块级Helpers使用技巧:

   Handlebars内置了with,eachif,unless,log这5种基本的Helpers。

   if标签只能判断true或false,不能执行一些复杂的运算逻辑。

   这些基本的Helpers并不能满足我们所有的需求,因此需要自定义一些辅助Helpers。

   ① 基本Helpers—each使用示例:orderList.hbs

<h1>订单列表</h1>
    <div class="record">
        <table class="order>
            <thead>
            <tr class="centerTr" >
                <th >采购凭证号</th>
                <th >公司</th>
                <th >供应商编号</th>
                <th >项目交货日期</th>
                <th >产地</th>
            </tr>
            </thead>
            <tbody>
            {{#each _DATA_.orderList}}
                <tr>
                    <td>{{purproofno}}</td>
                    <td>{{company}}</td>
                    <td>{{supplierno}}</td>
                    <td>{{projectdate}}</td>
                    <td>{{proplace}}</td>
                </tr>
            {{/each}}
            </tbody>
        </table>
    </div>

   ② 自定义Helpers使用示例:handlebars.coffee

Handlebars.registerHelper 'jsonToStr', (json, options) ->
  JSON.stringify(json)

Handlebars.registerHelper 'add', (a,b, options) ->
  a + b

Handlebars.registerHelper "formatPrice", (price, type, options) ->
  return if not price?
  if type is 1
    formatedPrice = (price / 100)
    roundedPrice = parseInt(price / 100)
  else
    formatedPrice = (price / 100).toFixed(2)
    roundedPrice = parseInt(price / 100).toFixed(2)
  if `formatePrice == roundedPrice` then roundedPrice else formatedPrice

Handlebars.registerHelper "formatDate", (date, type, options) ->
  return unless date
  switch type
    when "gmt" then moment(date).format("EEE MMM dd HH:mm:ss Z yyyy")
    when "day" then moment(date).format("YYYY-MM-DD")
    when "minute" then moment(date).format("YYYY-MM-DD HH:mm")
    else moment(date).format("YYYY-MM-DD HH:mm:ss")

Handlebars.registerHelper "lt", (a, b, options) ->
  if a < b
    options.fn(this)
  else
    options.inverse(this)

Handlebars.registerHelper "gt", (a, b, options) ->
  if a > b
    options.fn(this)
  else
    options.inverse(this)

Handlebars.registerHelper 'of', (a, b, options) ->
  values = if _.isArray b then b else b.split(",")
  if _.contains(values, a.toString()) or _.contains values, a
    options.fn(this)
  else
    options.inverse(this)

Handlebars.registerHelper 'length', (a, options) ->
  length = a.length

Handlebars.registerHelper "isArray", (a, options) ->
  if _.isArray a
    options.fn(this)
  else
    options.inverse(this)

Handlebars.registerHelper "between", (a, b, c, options) ->
  if a >= b and a <= c
    options.fn(this)
  else
    options.inverse(this)

Handlebars.registerHelper "multiple", (a, b, c, options) ->
  if c isnt 0 then a * b / c else 0

Handlebars.registerHelper "contain", (a, b, options) ->
  return options.inverse @ if a is undefined or b is undefined
  array = if _.isArray a then a else a.toString().split(",")
  if _.contains a, b then options.fn @ else options.inverse @

Handlebars.registerHelper "match", (a, b, options) ->
  return options.inverse @ if a is undefined or b is undefined
  if new RegExp(a).exec(b) is null then options.inverse @ else options.fn @

Handlebars.registerHelper "isOdd", (a, b, options) ->
  if a % b == 1
    options.fn(this)
  else
    options.inverse(this)

   handlebars.coffee编译成handlebarsApp.js的结果:

  Handlebars.registerHelper('jsonToStr', function(json, options) {
    return JSON.stringify(json);
  });

  Handlebars.registerHelper('add', function(a, b, options) {
    return a + b;
  });

  Handlebars.registerHelper("formatPrice", function(price, type, options) {
    var formatedPrice, roundedPrice;
    if (price == null) {
      return;
    }
    if (type === 1) {
      formatedPrice = price / 100;
      roundedPrice = parseInt(price / 100);
    } else {
      formatedPrice = (price / 100).toFixed(2);
      roundedPrice = parseInt(price / 100).toFixed(2);
    }
    if (formatedPrice == roundedPrice) {
      return roundedPrice;
    } else {
      return formatedPrice;
    }
  });

  Handlebars.registerHelper("formatDate", function(date, type, options) {
    if (!date) {
      return;
    }
    switch (type) {
      case "gmt":
        return moment(date).format("EEE MMM dd HH:mm:ss Z yyyy");
      case "day":
        return moment(date).format("YYYY-MM-DD");
      case "minute":
        return moment(date).format("YYYY-MM-DD HH:mm");
      default:
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  });

  Handlebars.registerHelper("lt", function(a, b, options) {
    if (a < b) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper("gt", function(a, b, options) {
    if (a > b) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper('of', function(a, b, options) {
    var values;
    values = _.isArray(b) ? b : b.split(",");
    if (_.contains(values, a.toString()) || _.contains(values, a)) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper('length', function(a, options) {
    var length;
    return length = a.length;
  });

  Handlebars.registerHelper("isArray", function(a, options) {
    if (_.isArray(a)) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper("between", function(a, b, c, options) {
    if (a >= b && a <= c) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper("multiple", function(a, b, c, options) {
    if (c !== 0) {
      return a * b / c;
    } else {
      return 0;
    }
  });

  Handlebars.registerHelper("contain", function(a, b, options) {
    var array;
    if (a === void 0 || b === void 0) {
      return options.inverse(this);
    }
    array = _.isArray(a) ? a : a.toString().split(",");
    if (_.contains(a, b)) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });

  Handlebars.registerHelper("match", function(a, b, options) {
    if (a === void 0 || b === void 0) {
      return options.inverse(this);
    }
    if (new RegExp(a).exec(b) === null) {
      return options.inverse(this);
    } else {
      return options.fn(this);
    }
  });

  Handlebars.registerHelper("isOdd", function(a, b, options) {
    if (a % b === 1) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    }
  });
View Code

相关文章:

  • 2021-07-28
  • 2021-10-25
  • 2021-10-08
  • 2021-07-20
  • 2022-02-02
  • 2021-12-23
  • 2021-06-05
  • 2021-08-20
猜你喜欢
  • 2022-12-23
  • 2022-01-03
  • 2022-12-23
  • 2021-12-07
  • 2022-02-01
  • 2021-09-13
  • 2022-01-27
相关资源
相似解决方案