handlebars.js 注册if扩展

来源：互联网发布：金融数据分析知乎编辑：程序博客网时间：2024/05/29 03:31

handlebars 对if 判断的能力较弱，往往难以满足项目要求，可以通过注册if 来达到要求，如下：

define(['handlebars'], function (handlebars) {    //注册判断器    handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {        switch (operator) {            case '!=':                return (v1 != v2) ? options.fn(this) : options.inverse(this);                break;            case '==':                return (v1 == v2) ? options.fn(this) : options.inverse(this);                break;            case '===':                return (v1 === v2) ? options.fn(this) : options.inverse(this);                break;            case '<':                return (v1 < v2) ? options.fn(this) : options.inverse(this);                break;            case '<=':                return (v1 <= v2) ? options.fn(this) : options.inverse(this);                break;            case '>':                return (v1 > v2) ? options.fn(this) : options.inverse(this);                break;            case '>=':                return (v1 >= v2) ? options.fn(this) : options.inverse(this);                break;            case '&&':                return (v1 && v2) ? options.fn(this) : options.inverse(this);                break;            case '||':                return (v1 || v2) ? options.fn(this) : options.inverse(this);                break;            case 'length':                return v1.length === v2 ? options.fn(this) : options.inverse(this);                break;            default:                return options.inverse(this);                break;        }    });    //注册计算器    handlebars.registerHelper('math', function (v1, operator, v2) {        if (operator == '+') {            return v1 + v2;        }        if (operator == '-') {            return v1 - v2;        }        if (operator == '*') {            return v1 * v2;        }        if (operator == '/') {            return v1 / v2;        }        if (operator == '%') {            return v1 % v2;        }    });    //表格序号索引+1    handlebars.registerHelper('addOne', function (index) {        //返回+1之后的结果        return index + 1;    });})

示例：

<script id="listTemplate" type="text/x-handlebars-template">    {{#ifCond list 'length' 0}}        <div class="info-tip no-data-tip min-h500">            <img src="<c:url value='/img/client/no-data-tip.png'/> " alt="">            <p>很抱歉，没有找到相关结果</p>        </div>    {{else}}    <ul class="notebook-list">        {{#each list}}        <li>            <h3>                <i class="star js-cancel" js-category-id="{{id}}"></i>                <a href="<c:url value='/client/note/detail/{{id}}'/>" target="_blank">{{title}}</a>                {{#ifCond attachmentFlag '==' 1 }}                <span class="favorite-icon"></span>                {{/ifCond}}                </a>            </h3>            {{#if scaleImgUrl}}            <div class="thumbnail">                <img src="{{substring scaleImgUrl}}">            </div>            {{/if}}            <div class="item-summary ellips_line3">{{summary}}</div>            <div class="item-foot">                <span>分类：{{categoryName}}</span>                <span>作者：{{author}}</span>                <span>创建时间：{{prettifyDate createTime}}</span>                <span>编辑时间：{{prettifyDate operateTime}}</span>                <span>赞：{{praiseCount}}</span>                <span>评论：{{commentCount}}</span>            </div>        </li>        {{/each}}    </ul>    {{/ifCond}}</script>

1 0