handlebars Helper用法: http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471357.html
逻辑运算符在handlebars.js { { } } #如果条件: http://www.ophome.cn/question/5732
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
在模板中调用helper
{{#ifCond v1 v2}}
{{v1}} is equal to {{v2}}
{{else}}
{{v1}} is not equal to {{v2}}
{{/ifCond}}
Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
switch (operator)
{
case "==":
return (v1==v2)?options.fn(this):options.inverse(this);
case "!=":
return (v1!=v2)?options.fn(this):options.inverse(this);
case "===":
return (v1===v2)?options.fn(this):options.inverse(this);
case "!==":
return (v1!==v2)?options.fn(this):options.inverse(this);
case "&&":
return (v1&&v2)?options.fn(this):options.inverse(this);
case "||":
return (v1||v2)?options.fn(this):options.inverse(this);
case "<":
return (v1<v2)?options.fn(this):options.inverse(this);
case "<=":
return (v1<=v2)?options.fn(this):options.inverse(this);
case ">":
return (v1>v2)?options.fn(this):options.inverse(this);
case ">=":
return (v1>=v2)?options.fn(this):options.inverse(this);
default:
return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
}
});
eq:
Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {
var c = {
"eq": function( v1, v2 ) {
return v1 == v2;
},
"neq": function( v1, v2 ) {
return v1 != v2;
},
...
}
if( Object.prototype.hasOwnProperty.call( c, op ) ) {
return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
}
return options.inverse( this );
} );
{{#compare numberone "eq" numbretwo}}
do something
{{else}}
do something else
{{/compare}}
var d = {
user_name: data.user_name,
credentials_number: data.credentials_number,
credentials_type: credentialsType2,
user_address: data.user_address,
user_birth_str: data.user_birth_str,
user_gender: data.user_gender,
};
var tp = Handlebars.compile($("#user_tpl").html());
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1==v2)
{
//满足添加继续执行
return options.fn(this);
}
else
{
//不满足条件执行else部分
return options.inverse(this);
}
});
Handlebars.registerHelper("transformat",function(value){
if(value==1)
{
return "男";
}
else if(value==2)
{
return "女";
}
else
{
return "未设置";
}
});
$("#user_content").html(tp(d));
{{#compare user_gender 1}}
<span>男</span><input name="user_gender" id="user_gender" value="1" checked="checked" type="radio">
{{else}}
<span>男</span><input name="user_gender" id="user_gender" value="1" type="radio">
{{/compare}}
{{#compare user_gender 2}}
<span>女</span><input name="user_gender" id="user_gender" value="2" checked="checked" type="radio">
{{else}}
<span>女</span><input name="user_gender" id="user_gender" value="2" type="radio">
{{/compare}}
Handlebars的模板标签中,{{#if condition}}{{/if}}只能判断这个condition是否为true和false,并不能判断是否等于某个特定的值。
我们可以借助Handlebars的registerHelper方法来实现。
例子:
我取得的数据有个字段status,这个字段可能是0,1,2 当等于0时要再页面上显示 ‘可用’ ,当等于1时,在页面上显示‘不可用’,当等于2时页面显示‘保留’,其他情况下显示‘unknow’.
下面是在js里面的registerHelper的代码:
var template = Handlebars.compile(source); //source是html模板文件 这边就省略了
var data = {status : 0};
Handlebars.registerHelper(‘state’,function() { //这边的state是等下要用在模板文件里面的
if(data.status == 0){
return ‘可用’;
}else if(data.status == 1){
return ‘不可用’;
}else if(data.status == 2){
return ‘保留’;
}else{
return ‘Unknow’;
}
});
$(“#yourDom”).html(template(data));
当前状态:{{state}}