Jqueryテンプレートデータバインディングプラグイン_jqueryの使い方を詳しく解説

1 バックグラウンド データを指定されたテンプレートにバインドします (ネストなし、コンテンツはバックグラウンド データの元の情報、フロントエンド バインディング) 通話記録ページを例に挙げます: まずターゲットコンテナを指定します: コードをコピー コードは次のとおりです:

&lt ;p class="width_level_half_5 太字 fl"&gt ;発信者番号

発信者番号

&lt ;p class="width_level_half_4 太字 fl" id="pAmount">金額($)

期間

&lt ;p class="width_level_half_10 ボールド fl">リージョン

CDR ID

; 次にテンプレート データを指定します: コードをコピー コードは次のとおりです。

${CalledStationId} ${StartTime} ${CSSCommonJS.ChangeDecimal(Revenue,3)} ${CSSCommonJS.GetTimeFormatString(RevenueTime)} ${Location} ${CdrId}

削除

バックグラウンドでのバインディング: function RenderTemplatefunction(container, template, data) { $(template).tmpl(data).appendTo(container); //元のメソッド }; CSSCommonJS. ).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);

2 指定されたテンプレートにデータを入力しています。背景 (願いの壁の実装) フロントデスク: コードをコピー コードは次のとおりです: ＆lt;！ - 模板数据end-＆gt; ＆lt;/div＆gt; ＆lt; div id = "itemtemplate" stiled = "display：none;"＆gt; ＆lt; dd>

<🎜

代打 代打は次のようになります: //获取许愿墙数据 $.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 ? argument.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('/', '-'); } .html(heart_date); $("#heart_person").html(selectedItem.data.participator); $("#heatr_puber").html (select) edItem.data.pubName); ); 🎜>

3 ネストされたバインディング (ターゲット データ ソースには複数の配列が含まれており、それぞれが対応するサブテンプレートにバインドされています)

請求書ページの例: Frontデスク:

コードをコピー コードは次のとおりです: 目标容器

外层型板

gt; gt;

{{tmpl(BillTransactions) "#BillingDetailDateTemplate"}} {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}} 固定写法、最初のパラメータはデータソース内の 2 番目の数グループ、2 番目は使用する子モジュール {{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}} 子模板

${( typeof(Name) == "未定義" ? タイプ : 名前 ) ":"}

子モジュールは 3 つのデータソースのパブリック モジュールであり、プロパティの名前が異なる可能性があります。判断が必要です ${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "未定義" ? Amount : InitialAmount), 2)} ${Description} 后台绑定 复制代 代码如下: 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(); } }); }); 嵌套绑定是模板自动完成的。