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,each,if,unless,Helpers。log这5种基本的
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);
}
});