您的位置:首页 > 其它

HandleBars中自定义helper方法

2017-11-24 15:01 211 查看
handleBars之所以提供helper的自定义,在于其较弱的逻辑判断,其自身仅可以true/false的判断,对于其他==、>=、<等运算符或运算表达式num%2等均不支持,需自己定义所需的helper,下面将详细说明基本语法。
helper自定义基本语法:
简单helper

Handlebars.registerHelper('扩展函数名,例如,formaterNum',  function(num, options){
       num = num + '';

       return num.replace(/(?=(?!^)(?:\d{3})+(?:\.|$))(\d{3}(\.\d+$)?)/g,',$1');

});
然后就可以在模板中使用:{{formaterNum param1}}
helper块

例如,偶数判断:

helper定义

Handlebars.registerHelper('isEven', function(value, options){

     console.log('value:', value);

     console.log('this', this);//其中this为上下文主题, 也就是传入的数据对象,输出为:this: Object {num: 2}

     console.log('options.fn(this):',options.fn(this));//其中options.fn为填入真实数据的模板中if语句内容,输出为:options.fn(this):2是偶数 

     console.log('options.inverse(this)',options.inverse(this));//其中options.inverse为填入真实数据的模板中else语句内容,此处因为2为偶数即不走此分支

     if (value % 2 == 0) {

         return options.fn(this);
     } else {

         return options.inverse(this);

     }

});

模板定义

{{#isEvent num}}

    {{num}}是偶数

{{else}}

    {{num}}是奇数

{{/isEvent}}

传入模板的数据对象

{

   num: 2

}

这里特别说明下options.fn和options.inverse两个方法,options.fn将传入的this,即传入的数据对象{num: 2},编译到我们提供的模板中,再将编译后的结果(2是偶数)返回;而options.inverse方法则编译else部分的内容,这里由于我们传入的对象中num是2,不走else部分。

参考文档:
基础文档:http://keenwon.com/992.html        http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/
进阶文档:https://www.cnblogs.com/lvdabao/p/handlebars_helper.html         http://blog.csdn.net/azureternite/article/details/53160380  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息