handlebars Helper用法

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}}