handlebars支持复杂表达式的解决方法
最近一直在使用handlebars,感觉helper还是不够强大,其中一点就是不支持复杂的表达式(比如a===b&&a>0)。所以专门写了一个helper来解决这个问题,先看代码
** 模板 **
{{#ex "{{state}}==='submiting'"}}
<i class="icon cross-danger">1</i>
{{else}}
<i class="icon cross-success">2</i>
{{/ex}}
** 注册helper **
var hbs = require('hbs');
hbs.registerHelper('ex', function(str, options) {
var reg = /\{\{.*?\}\}/g;
var result = false;
var variables = str.match(reg);
var context = this;
_.each(variables, function(v){
var key = v.replace(/{{|}}/g,"");
var value = typeof context[key]==="string"?('"'+context[key]+'"'):context[key];
str = str.replace(v, value);
});
try{
result = eval(str);
if (result) {
return options.fn(this);
} else {
return options.inverse(this);
}
}catch(e){
console.log(str,'--Handlerbars Helper "ex" deal with wrong expression!');
return options.inverse(this);
}
});
** 传入参数 ** [‘submiting’, ‘finish’]
** 原理 ** 将整个表达式作为字符串传入,然后通过this指针获取helper上下文并解析替换,最后用eval来执行表达式获取结果。
** 特点 **
- 支持复杂逻辑表达式
- 支持变量解析