1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）
以通话记录页为例：
首先指定目标容器：
复制代码 代码如下:
<dl>
<dd>
<p></p>
<p>被叫号码</p>
<p>主叫号码</p>
<p>起始时间</p>
<p>金额($)</p>
<p>时长</p>
<p>区域</p>
<p>CDR ID</p>
<p></p>
<p></p>
</dd>
</dl>
其次指定模板数据：
复制代码 代码如下:
<dl >
<dd >
<p>
<b ></b>
</p>
<span><span>${CalledStationId}</span></span>
<span>${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}</span>
<span >${StartTime}</span>
<span>${CSSCommonJS.ChangeDecimal(Revenue,3)}</span>
<span><span>${CSSCommonJS.GetTimeFormatString(RevenueTime)}</span></span>
<span>${Location} </span>
<span >${CdrId}</span>
<p>
<input type="checkbox" /></p>
<span>
<button><b>删除</b></button>
</span>
</dd>
</dl>
后台进行绑定：
<script src="https://www.jb51.net/Scripts/jquery.tmpl.js" type="text/javascript"></script>
function RenderTemplatefunction(container, template, data) {
$(template).tmpl(data).appendTo(container); //原始方法
};
CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);
2 指定模板中无通配符，后台填充数据（许愿墙实现）
前台：
复制代码 代码如下:
<div>
<!-- 模板数据-->
<div>
</div>
<!-- 模板数据end-->
</div>
<div>
<dd>
<div>
<div>
<div>
<a href="#"><span></span></a>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</dd>
</div>
后台进行取数据绑定，绑事件等。
复制代码 代码如下:
//获取许愿墙数据
$.get("control/controler.ashx?t=" + new Date(), { type: 'heartwall', date: new Date() }, function (data) {
var jsonData = eval("(" + data + ")");
//alert(jsonData.table[1].title);
RenderTemplatefunction($("#ItemList"), $("#ItemTemplate"), jsonData.table);
$("#ItemList").children("dd").each(function (index) {
var tTr = this;
var selectedItem = $.tmplItem(this);
var tmp_title = $(tTr).find("#item_title");
var tmp_person = $(tTr).find("#item_person");
var tmp_date = $(tTr).find("#item_date");
var btnTitle = $(tTr).find("#btnTitle");
var bgNumber = "it" + Math.floor(Math.random() * 10 + 9) + ".jpg"; //1-10的随机数
var bg = $(tTr).find(".bg");
bg.css('background-image', "url('img/bg/" + bgNumber + "')");
var getRandomColor = function () {
return (function (m, s, c) {
return (c ? arguments.callee(m, s, c - 1) : '#') +
s[m.floor(m.random() * 16)]
})(Math, '0123456789abcdef', 5)
}
var Color = getRandomColor();
$(tTr).find("#item_title").css('color', Color.toString());
//绑定数据
tmp_title.html(selectedItem.data.title);
tmp_person.html(selectedItem.data.pubName);
tmp_date.html(selectedItem.data.addDate.toString().split(' ')[0].replaceAll('https://www.jb51.net/', '-').toString());
btnTitle.click(function () {
var heart_date = "";
if (selectedItem.data.beginDate.toString() == selectedItem.data.endDate.toString()) {
heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('https://www.jb51.net/', '-');
}
else {
heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('https://www.jb51.net/', '-') + " 至 " +
selectedItem.data.endDate.toString().split(' ')[0].replaceAll('https://www.jb51.net/', '-');
}
$("#heart_title").html(selectedItem.data.title);
$("#heart_content").html(selectedItem.data.content);
$("#heart_date").html(heart_date);
$("#heart_person").html(selectedItem.data.participator);
$("#heart_contact").html(selectedItem.data.contact);
$("#heatr_puber").html(selectedItem.data.pubName);
//ShowBox
this.href = "#heartInfo_content";
$(this).addClass("heartInfo_inline");
$("#heartInfo_content").show();
showDialog();
});
});
});
3 嵌套绑定 （目标数据源中含有多个数组，分别绑定到对应的子模板）
账单页面为例：
前台：
复制代码 代码如下: