handlebars支持复杂表达式的解决方法
发布于 8 年前 作者 yalishizhude 6436 次浏览 来自 分享

最近一直在使用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来执行表达式获取结果。

** 特点 **

  • 支持复杂逻辑表达式
  • 支持变量解析
回到顶部