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

1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）

　　以通话记录页为例：

　　首先指定目标容器：

复制代码代码如下:

　　</dd>

　　</dl>

　　其次指定模板数据：

复制代码代码如下:

　　<dd >

　　</p>

　　<span class="width_level_half_5 fl"><span style="color:#FF0000;">${CalledStationId}</span></span>

　　<span class="width_level_half_5 fl">${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}</span>

　　<span class="width_level_half_6 fl" id="Start_time" >${StartTime}</span>

　　<span class="width_level_half_4 fl">${CSSCommonJS.ChangeDecimal(Revenue,3)}</span>

　　<span class="width_level_half_4 fl"><span style="color:#FF0000;">${CSSCommonJS.GetTimeFormatString(RevenueTime)}</span></span>

　　<span class="width_level_half_10 fl">${Location} </span>

　　<span class="width_level_half_4 fl nopitch" name="pCDRHeader" >${CdrId}</span>

　　</span>

　　</dd>

　　</dl>

　　后台进行绑定：

　　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>

　　<dd>

　　</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('/', '-').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();

　　});

　　3 嵌套绑定（目标数据源中含有多个数组，分别绑定到对应的子模板）

　　账单页面为例：

　　前台：

复制代码代码如下:

　　目标容器

　　</span>

　　外层模板

　　</dd>

　　<span style="color:#FF0000;"> {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span> 固定写法，第一个参数为数据源中的第二个数组，第二个为使用的子模板

　　</dl>

　　</div>

　　子模板

　　<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();

　　}

　　});

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

教程首页更多教程