[b]1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）
[/b]以通话记录页为例：
首先指定目标容器：
[url=#] </div>
<div class="k">
</div>
<div class="person" id="item_person">
</div>
<div class="date" id="item_date">
</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('/', '-').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('/', '-');
}
else {
heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') + " 至 " +
selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');
}
$("#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();
});
});
});
[b]3 嵌套绑定 （目标数据源中含有多个数组，分别绑定到对应的子模板）
[/b]账单页面为例：
前台：
目标容器
<span class="width_level_0 fl nopitch" id="ProductBilling">
</span>
外层模板
<div id="ProductBillingTemplate" class="none">
<dl class="box_pannel_content_filled_special">
<dd class="border_none_special_top">
<p class="width_level_half_3 fl"></p>
<span class="width_level_9 fl"><b class="bold" id="bComboName"></b> <b id="bTel"></b></span>
</dd>
{{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
<span style="color:#FF0000;"> {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span> 固定写法，第一个参数为数据源中的第二个数组，第二个为使用的子模板
{{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
</dl>
</div>
子模板
<div id="BillingDetailDateTemplate" class="none">
<dd class="border_none_special">
<p class="width_level_half_3 fl"></p>
<p class="width_level_half_12 fl">${(<span style="color:#FF0000;">typeof(Name) == "undefined" ? Type : Name</span>) + ":"}</p> <span style="color:#FF0000;">
子模板是三个数据源的公共模板，可能属性的名称会有不同，需要判断</span>
<span class="width_level_1 fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefined" ?
Amount : InitialAmount), 2)}</span>
<span class="width_level_5 fl" id="spdescription">${Description}</span>
</dd>
</div>
后台绑定
CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#ProductBilling"), $(t.panelID).find("#ProductBillingTemplate"), billingDetail);
//
$(t.panelID).find("#ProductBilling").children("dl").each(function (index) {
var tTr = this;
var selectedItem = $.tmplItem(this);
var bComboName = $(tTr).find("#bComboName");
var bTel = $(tTr).find("#bTel");
var n = selectedItem.data;
var curAcct = CSSCommonJS.GetCurrentUser(t.masterUser, n.AccountId); // n.BusinessAccountId);
var curpstn = "";
if (curAcct.AccountType == CSSAccountType.BB) {
if (curAcct.DID) {
if (curAcct.CountryCode == "1") {
curpstn = "(Tel:" + CSSCommonJS.FormatUSCAPhone(curAcct.DID) + ")";
}
else {
curpstn = "(Tel:" + curAcct.DID + ")";
}
}
else if (curAcct.BBNumber) {
curpstn = "(" + curAcct.BBNumber + ")";
}
}
else if (curAcct.AccountType == CSSAccountType.HY) {
curpstn = "(" + curAcct.HYNumber + ")";
}
else if (curAcct.AccountType == CSSAccountType.DSL) {
curpstn = "(" + curAcct.DSLNumber + ")";
}
bComboName.html(curAcct.ComboName);
bTel.html(curpstn);
if ((n.BillTransactions.length + n.RebateInstances.length + n.TopUpDetails.length) == 0) {
$(tTr).hide();
}
$(tTr).find(".border_none_special").each(function (spindex) {
var tdd = this;
var selectedItem = $.tmplItem(this);
var spamount = $(tdd).find("#spamount");
var spdescription = $(tdd).find("#spdescription");
if (t.currentAdmin.Valid) {
spamount.attr("title", spamount.attr("title").formatDate(t.masterUser, ""));
}
else {
spdescription.hide();
}
});
});
嵌套绑定是模板自动完成的。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
