laytpl JavaScript模板引擎使用

1.页面发送异步请求获取数据后构造页面结构之前都是采用拼接的方式，后来发现laytpl这个模板引擎尝试使用了一下，上手非常快。官网地址http://laytpl.layui.com/ 模板只有2kb，执行效率也不错，详见官网。

2.页面结构

<script id="demo" type="text/javascript">
<div id class="message">
<span>总体概况：</span> <span id="all">总数：<label>{{d.length}}</label></span> <span id="online">在线：
<label>{{getFMonline(d)}}</label></span>
<span id="outline">离线：<label>{{getFMoffline(d)}}</label></span>
</div>
<div class="data-warp">
{{# for(var i = 0, len = d.length; i < len; i++){ }}
<div class="data-box green ">
<div class="data-box-con">
<h4>{{d[i].QYMC}}</h4>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="item">时间：</td>
<td colspan="3	">{{d[i].CJSJ}}</td>
</tr>
<tr>
<td class="item">日流量：</td>
<td class="data">{{d[i].FSLLCOU}}吨</td>
<td class="item">累积流量：</td>
<td class="data">{{d[i].FSMCOU}}吨</td>
</tr>
<tr>
<td class="item">瞬时流量：</td>
<td class="data">0吨</td>
<td class="item">剩余流量：</td>
<td class="data">{{d[i].FSYCOU}}吨</td>
</tr>
<tr>
<td class="item">阀门状态：</td>
<td colspan="3"><span class="FM-{{getFMInfo(d[i].KGZT)}}"></span></td>
</tr>
</table>
</div>
<div class="{{checkNewLine(i+1)}}"></div>
</div>
{{# } }}

</div>
</script>

function intiKMInfo() {
$.ajax({
type: "post",
url: "../../ashx/zlxxzs.ashx",
data: "",
success: function (data) {
var gettpl = document.getElementById('demo').innerHTML;   //获取拼接部分的内容
laytpl(gettpl).render(eval(data), function (html) {       //給拼接的模板绑定数据
document.getElementById('view').innerHTML = html;    // 吧生成的结构绑定在负责呈现内容的div中。
});
}
});
}

完成。

ps: id=view的 div为最终绑定html的div ，<script id="demo" type="text/javascript"> ，这块是引擎渲染拼接的结构。

输出一个普通字段，不转义html： {{ d.field }}

输出一个普通字段，并转义html： {{= d.field }}

JavaScript脚本： {{# JavaScript statement }}