Jquery 模板数据绑定插件的使用方法详解

本篇文章是对在Jquery中模板数据绑定插件的使用方法进行了详细的分析介绍需要的朋友参考下

绑定后台数据到指定模板（无嵌套内容均为后台数据原始信息前台绑定）
以通话记录页为例
首先指定目标容器

复制代码 代码如下:
<dl class="box_pannel_content_filled_border none" id="gvRecCalls">
<dd class="bg_blue">
<p class="width_level_half_ fl nopitch"></p>
<p class="width_level_half_ bold fl">被叫号码</p>
<p class="width_level_half_ bold fl">主叫号码</p>
<p class="width_level_half_ bold fl">起始时间</p>
<p class="width_level_half_ bold fl" id="pAmount">金额($)</p>
<p class="width_level_half_ bold fl">时长</p>
<p class="width_level_half_ bold fl">区域</p>
<p class="width_level_half_ bold fl nopitch" name="pCDRHeader">CDR ID</p>
<p class="width_level_half_ fl none" name="pSelectCbHeader"></p>
<p class="width_level_half_ fr none" name="pDeleteCbHeader"></p>
</dd>
</dl>

其次指定模板数据

复制代码 代码如下:
<dl id="RecCallsTemplate" >
<dd >
<p class="center width_level_half_ fl nopitch">
<b class="${CallMode == ? icon_call_in : icon_call_out}" ></b>
</p>
<span class="width_level_half_ fl"><span style="color:#FF;">${CalledStationId}</span></span>
<span class="width_level_half_ fl">${CallingStationIdsubstr(CallingStationIdindexOf("*") + )}</span>
<span class="width_level_half_ fl" id="Start_time" >${StartTime}</span>
<span class="width_level_half_ fl">${CSSCommonJSChangeDecimal(Revenue)}</span>
<span  class="width_level_half_ fl"><span  style="color:#FF;">${CSSCommonJSGetTimeFormatString(RevenueTime)}</span></span>
<span class="width_level_half_ fl">${Location} </span>
<span class="width_level_half_ fl nopitch" name="pCDRHeader" >${CdrId}</span>
<p class="right width_level_half_ fr none" name="pSelectCbHeader">
<input type="checkbox" name="cbSelect" class="label" /></p>
<span class="fl none" name="pDeleteCbHeader">
<button class="crm_btn norm" id="btDelete"><b>删除</b></button>
</span>
</dd>

</dl>

后台进行绑定
<script src="Scripts/jquerytmpljs" type="text/javascript"></script>
function RenderTemplatefunction(container template data) {
$(template)tmpl(data)appendTo(container); //原始方法
};
CSSCommonJSRenderTemplatefunction($(tpanelID)find("#gvRecCalls") $(tpanelID)find("#RecCallsTemplate") resultCdrData);
指定模板中无通配符后台填充数据（许愿墙实现）
前台

复制代码 代码如下:
<div id="content">
<! 模板数据>
<div id="ItemList">
</div>
<! 模板数据end>
</div>
<div id="ItemTemplate" style="display: none;">
<dd>
<div class="items">
<div class="bg">
<div class="info">
<a href="#" id="btnTitle"><span id="item_title"></span></a>
</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/controlerashx?t=" + new Date() { type: heartwall date: new Date() } function (data) {
var jsonData = eval("(" + data + ")");
//alert(jsonDatatable[]title);
RenderTemplatefunction($("#ItemList") $("#ItemTemplate") jsonDatatable);
$("#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" + Mathfloor(Mathrandom() * + ) + "jpg"; //的随机数
var bg = $(tTr)find("bg");
bgcss(backgroundimage "url(img/bg/" + bgNumber + ")");
var getRandomColor = function () {
return (function (m s c) {
return (c ? argumentscallee(m s c ) : #) +
s[mfloor(mrandom() * )]
})(Math abcdef )
}
var Color = getRandomColor();
$(tTr)find("#item_title")css(color ColortoString());
//绑定数据
tmp_titlehtml(selectedItemdatatitle);
tmp_personhtml(selectedItemdatapubName);
tmp_datehtml(selectedItemdataaddDatetoString()split( )[]replaceAll(/ )toString());
btnTitleclick(function () {
var heart_date = "";
if (selectedItemdatabeginDatetoString() == selectedItemdataendDatetoString()) {
heart_date = selectedItemdatabeginDatetoString()split( )[]replaceAll(/ );
}
else {
heart_date = selectedItemdatabeginDatetoString()split( )[]replaceAll(/ ) + " 至 " +
selectedItemdataendDatetoString()split( )[]replaceAll(/ );
}
$("#heart_title")html(selectedItemdatatitle);
$("#heart_content")html(selectedItemdatacontent);
$("#heart_date")html(heart_date);
$("#heart_person")html(selectedItemdataparticipator);
$("#heart_contact")html(selectedItemdatacontact);
$("#heatr_puber")html(selectedItemdatapubName);
//ShowBox
thishref = "#heartInfo_content";
$(this)addClass("heartInfo_inline");
$("#heartInfo_content")show();
showDialog();
});
});
});

嵌套绑定 （目标数据源中含有多个数组分别绑定到对应的子模板）
账单页面为例
前台

复制代码 代码如下:
目标容器
<span class="width_level_ 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_ fl"></p>
  <span class="width_level_ fl"><b class="bold"  id="bComboName"></b> <b id="bTel"></b></span>
</dd>
{{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
  <span style="color:#FF;"> {{tmpl(RebateInstances)  "#BillingDetailDateTemplate"}}</span>  固定写法第一个参数为数据源中的第二个数组第二个为使用的子模板
{{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
</dl>
</div>
子模板
<div id="BillingDetailDateTemplate" class="none">
<dd class="border_none_special">
<p class="width_level_half_ fl"></p>
  <p class="width_level_half_ fl">${(<span  style="color:#FF;">typeof(Name) == "undefined" ? Type :  Name</span>) + ":"}</p> <span style="color:#FF;">
子模板是三个数据源的公共模板可能属性的名称会有不同需要判断</span>
  <span class="width_level_ fl" id="spamount" title = "{{= CreateDate  }}">${CSSCommonJSChangeDecimal((typeof(InitialAmount) ==  "undefined" ?
Amount : InitialAmount) )}</span>
<span class="width_level_ fl" id="spdescription">${Description}</span>
</dd>
</div>

后台绑定

复制代码 代码如下:
CSSCommonJSRenderTemplatefunction($(tpanelID)find("#ProductBilling")  $(tpanelID)find("#ProductBillingTemplate") billingDetail);
//
$(tpanelID)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 = selectedItemdata;
var curAcct = CSSCommonJSGetCurrentUser(tmasterUser nAccountId); // nBusinessAccountId);
var curpstn = "";
if (curAcctAccountType == CSSAccountTypeBB) {
if (curAcctDID) {
if (curAcctCountryCode == "") {
curpstn = "(Tel:" + CSSCommonJSFormatUSCAPhone(curAcctDID) + ")";
}
else {
curpstn = "(Tel:" + curAcctDID + ")";
}
}
else if (curAcctBBNumber) {
curpstn = "(" + curAcctBBNumber + ")";
}
}
else if (curAcctAccountType == CSSAccountTypeHY) {
curpstn = "(" + curAcctHYNumber + ")";
}
else if (curAcctAccountType == CSSAccountTypeDSL) {
curpstn = "(" + curAcctDSLNumber + ")";
}
bComboNamehtml(curAcctComboName);
bTelhtml(curpstn);
if ((nBillTransactionslength + nRebateInstanceslength + nTopUpDetailslength) == ) {
$(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 (tcurrentAdminValid) {
spamountattr("title" spamountattr("title")formatDate(tmasterUser ""));
}
else {
spdescriptionhide();
}
});
});

嵌套绑定是模板自动完成的