Jquery 템플릿 데이터 바인딩 플러그인_jquery 사용 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

1 배경 데이터를 지정된 템플릿에 바인딩합니다(중첩 없음, 내용은 배경 데이터의 원본 정보, 프런트 엔드 바인딩) 통화 기록 페이지를 예로 들어 보겠습니다. 먼저 대상 컨테이너를 지정하십시오. 코드 복사 코드는 다음과 같습니다.

&lt ;p class="width_level_half_5 굵은 fl"&gt ; 숫자 & lt;/p & gt; & lt; p class = "width_level_half_5 굵은 fl" & gt; 시작 시간 금액($)

기간 지역

CDR ID 🎜>

두 번째로 템플릿 데이터 지정:

코드 복사 코드는 다음과 같습니다.

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

삭제

백그라운드에서 바인딩: ;/script> function RenderTemplatefunction(container, template, data) { $(template).tmpl(data).appendTo(container); //원래 메서드 }; CSSCommonJS. ($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);

2 지정된 항목에 와일드카드가 없습니다. 템플릿 배경에 데이터 채우기(소망벽 구현) 프런트 데스크: 코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

后台进行取数据绑定，绑事件等。

复主代码 代码如下: //获取许愿墙数据 $.get("control/controler.ashx?t=" new Date(), { type: 'heartwall', date: new Date() }, function (데이터) { 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('배경- image', "url('img/bg/" bgNumber "')"); var getRandomColor = function () { return (function (m, s, c) { return (c ? 인수.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 (selectedItem .data.pub이름); > 🎜> 3 중첩 바인딩(대상 데이터 소스에는 여러 배열이 포함되어 있으며 각 배열은 해당 하위 템플릿에 바인딩됨)

청구서 페이지 예: 전면 데스크:

코드 복사

코드는 다음과 같습니다. 目标容器

외부层模板

{{tmpl(BillTransactions) "#BillingDetailDateTemplate"}} {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}} 固定写법, 第一个参数为数据源中的第二个数组, 第二个为使사용용자模板 { {tmpl(TopUpDetails) "#BillingDetailDateTemplate"}} 子模板

${( typeof(Name) == "정의되지 않음 " ? 유형: 이름 ) ":"}

子模板是三个数据源的公共模板，可能属性的name称会有不同，需要判断 ${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefine" ? 금액 : 초기Amount), 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 = "(전화:" 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(); } } ); }); 嵌套绑定是模板自动完成的입니다.