1.頁面傳送非同步請求獲取資料後構造頁面結構之前都是採用拼接的方式，後來發現laytpl這個模板引擎嘗試使用了一下，上手非常快。

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 }}