Juicer模板引擎的初步使用

1、首先导入Juicer.js文件“<script src="~/static/js/juicer/juicer-min.js"></script>”

设置自定义标签：

juicer.set({
'tag::operationOpen': '{*', //操作标签-开
'tag::operationClose': '}', //操作标签-关
'tag::interpolateOpen': '${', //变量标签-开
'tag::interpolateClose': '}', //变量标签-关
'tag::noneencodeOpen': '$${', //禁止转义标签-开
'tag::noneencodeClose': '}', //禁止转义标签-关
'tag::commentOpen': '{#', //注释标签-开
'tag::commentClose': '}' //注释标签-关
//'cache': true, //[默认开启]是否缓存模板编译结果，开启后会避免同一模板多次数据渲染时重复编译模板，减少编译模板所耗的时间
//'script': true, //[默认开启]是否清除空白，清除模板中的空白，包括换行、回车等
//'error handling': true, //[默认开启]是否处理错误
//'detection': true //[默认开启]是否检测变量是否定义，开启后如果变量未定义，将用空白字符串代替
});

2、juicer模板

<!--juicer模板页开始-->
<script type="text/template" id="operatorInfo">
　　{*each list as item}
　　<tr>
　　<td class="text-primary">${item.OperatorNo}</td>
　　<td>${item.OperatorName}</td>
　　<td>${item.AccountNo}</td>
　　<td class="text-center"><span class="${item.Status== 1? 'text-success' : 'text-danger'}">${item.Status==1?"有效":"无效"}</span></td>
　　</tr>
{*/each}
</script>
<!--juicer模板页结束-->

3、JS代码

$(function () {
　　$.ajax({
　　　　url: "/AccountManage/LoadOperatorInfo",
　　　　type: "post",
　　　　success: function (data) {
　　　　　　　　　　　var userInfo = $("#operatorInfo").html();// 获取模板页的内容
　　　　　　　　　　　var html = juicer(userInfo, { list: JSON.parse(data) });//使用模板引擎渲染json数据到模板operatorInfo,变量html接收　　　　　　　　　　　　                                            $("#showOperatorInfo").html(html);//输出到需要显示的控件中

　　　　　　　　　　},

　　　　error: function () {
　　　　　　　　alert("系统处理错误");
　　　　　　　　}
　　});
});

3、html代码

<table class="table table-striped table-hover table-bordered">
<thead>
<tr class="bg-warning">
<th>操作员账号</th>
<th>操作员姓名</th>
<th>所属账号</th>
</tr>
</thead>
<tbody id="showOperatorInfo"></tbody>
</table>