JQ项目中如何使用Handlebars简化模版

一 安装

首先使用npm install handlebars进行安装，使用const Handlebars = require(“handlebars”);进行引入。
或者使用cdn直接引入

<script src="https://cdn.bootcdn.net/ajax/libs/handlebars.js/4.7.7/handlebars.amd.min.js"></script>

二 使用

可以基于jQuery ajax的封装获得html模版，例如

    Rose.ajax.getHtml("../../../tpl/group/cusManagerInfo.tpl",function(html,statuz){
        if(statuz){
            //接口成功,html为获得的html模版
            var template = Handlebars.compile(html);
            //将html模版插入class="cusManagerInfo"元素中
            //data为你需要插入模版中的数据
            $(".cusManagerInfo").html(template(data));
        }
    });

创建对应tpl文件，下面简单介绍日常写法

//with 助手代码注入到对象的属性中，使你可以访问其属性
{{#with person}}
   {{firstname}} {{lastname}}
{{/with}}

重点：通过调用 Handlebars.registerHelper 方法自定义助手，例如

//助手代码将收到一个 options 参数
//options.fn接收一个上下文参数并返回一个字符串
//options.hash可以更轻松地接受可变数量的参数
Handlebars.registerHelper('if_eq', function(context, options) {
  if (context == options.hash.compare)
    return options.fn(this);
  return options.inverse(this);
});
Handlebars.registerHelper('if_gt', function(context, options) {
  if (context > options.hash.compare)
    return options.fn(this);
  return options.inverse(this);
});

使用方法如下

//如果applyList的长度大于0，则循环applyList
//此时代码助手中options.hash为{compare:0,class:'top'}
{{#if_gt applyList.length compare=0 class="top"}}
	{{#each applyList}}
		<div id="applyId_{{applyId}}" >{{applyId}}</div>
		//如果applyList[i].isShowAble等于0的话，则不显示
	    <div class="input-group" {{#if_eq isShowAble compare=0}}style="display: none;"{{/if_eq}}>是否显示</div>
	{{/each}}
{{/if_gt}}

更多例子参考handlebars官网：官网地址