<strong>1 배경 데이터를 지정된 템플릿에 바인딩합니다(중첩 없음, 내용은 배경 데이터의 원본 정보, 프런트 엔드 바인딩) <br></strong>통화 기록 페이지를 예로 들어 보겠습니다. <br> 먼저 대상 컨테이너를 지정하십시오. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="48754" class="copybut" id="copybut48754" onclick="doCopy('code48754')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code48754"> <br> <dl class="box_pannel_content_filled_border none" id="gvRecCalls "><br> <dd class="bg_blue"><br> <p class="width_level_half_2 fl nopitch"></p><br> < ;p class="width_level_half_5 굵은 fl"> ; 숫자 & lt;/p & gt; <br> & lt; p class = "width_level_half_5 굵은 fl" & gt; 시작 시간 </ p><br> <p class="width_level_half_4 굵은 fl" id="pAmount">금액($)</p><br> <p class="width_level_half_4 굵은 fl">기간 </ p><br> <p class="width_level_half_10 굵은 fl">지역</p><br> <p class="width_level_half_4 굵은 fl nopitch" name="pCDRHeader">CDR ID< /p> 🎜> <p class="width_level_half_2 fl none" name="pSelectCbHeader"></p><br> <p class="width_level_half_2 fl none" name="pDeleteCbHeader">< /p><br> </dd><br></dl><br><br><br>두 번째로 템플릿 데이터 지정: </div> <br><br><div class="codetitle"><span>코드 복사 <a style="CURSOR: pointer" data="40468" class="copybut" id="copybut40468" onclick="doCopy('code40468')"> <u></u> 코드는 다음과 같습니다.</a></span></div><dl id="RecCallsTemplate" ><div class="codebody" id="code40468"><dd ><br><p class="center width_level_half_2 fl nopitch"><br><b class="${CallMode == 1 ? 'icon_call_in' : 'icon_call_out'}" ></b><br></p><br>< span class="width_level_half_5 fl"><span style="color:#FF0000;">${CalledStationId}</span></span><br><span class="width_level_half_5 fl"> ;${CallingStationId.substr(CallingStationId.indexOf("*") 1)}</span><br><span class="width_level_half_6 fl" id="Start_time" >${StartTime}</span> ;<BR><span class="width_level_half_4 fl">${CSSCommonJS.ChangeDecimal(Revenue,3)}</span><br><span class="width_level_half_4 fl"><span style= "color:#FF0000;">${CSSCommonJS.GetTimeFormatString(RevenueTime)}</span></span><br><span class="width_level_half_10 fl">${Location} </span> ;<BR><span class="width_level_half_4 fl nopitch" name="pCDRHeader" >${CdrId}</span><br><p class="right width_level_half_2 fr none" name="pSelectCbHeader"> ;<BR><input type="checkbox" name="cbSelect" class="label" /></p><br><span class="fl none" name="pDeleteCbHeader"><br><button class="crm_btn Norm" id="btDelete"><b>삭제</b></button><br></span><br></dd><br><br></dl><br><br><br>백그라운드에서 바인딩: </div> <script src="Scripts/jquery.tmpl.js" type="text/javascript"> ;/script><br>function RenderTemplatefunction(container, template, data) {<br> $(template).tmpl(data).appendTo(container); //원래 메서드<br>};<br> CSSCommonJS. ($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);<br><br>2 지정된 항목에 와일드카드가 없습니다. 템플릿 배경에 데이터 채우기(소망벽 구현) <br><strong> 프런트 데스크: <br></strong><br><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="18442" class="copybut" id="copybut18442" onclick="doCopy('code18442')"><u></u> 코드는 다음과 같습니다. 다음과 같습니다: </a><div class="codebody" id="code18442"> <br> <div id="content"><br> <-- 模板数据--><br> <div id="ItemList"><br> </div> ;<BR> <!-- 模板数据end--><br> </div><br> <div id="ItemTemplate" style="display: none;"><br> < dd><br> <div class="items"><br> <div class="bg"><br> <div class="info"><br> <a href=" #" id="btnTitle"><span id="item_title"></span></a><br> </div><br> <div class="k"> <br> </div><br> <div class="person" id="item_person"><br> <div class="date" id="item_date" ><br> </div><br> </div><br> </div><br> </dd><br> </div> <br><br></span></div>后台进行取数据绑定，绑事件等。<br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="57963" class="copybut" id="copybut57963" onclick="doCopy('code57963')">复主代码<u></u></a> 代码如下:</span><div class="codebody" id="code57963"> <br> //获取许愿墙数据<br> $.get("control/controler.ashx?t=" new Date(), { type: 'heartwall', date: new Date() }, function (데이터) {<br> var jsonData = eval("(" data ")");<br> //alert(jsonData.table[1].title);<br> RenderTemplatefunction($("#ItemList") , $("#ItemTemplate"), jsonData.table);<br> $("#ItemList").children("dd").each(function (index) {<br> var tTr = this;<br> var selectedItem = $.tmplItem(this);<br> var tmp_title = $(tTr).find("#item_title");<br> var tmp_person = $(tTr).find("#item_person");<br> var tmp_date = $(tTr).find("#item_date");<br> var btnTitle = $(tTr).find("#btnTitle");<br> var bgNumber = "it" Math.floor(Math .random() * 10 9) ".jpg"; //1-10적随机数<br> var bg = $(tTr).find(".bg");<br> bg.css('배경- image', "url('img/bg/" bgNumber "')");<br> var getRandomColor = function () {<br> return (function (m, s, c) {<br> return (c ? 인수.callee(m, s, c - 1) : '#') <br> s[m.floor(m.random() * 16)]<br> })(Math, '0123456789abcdef', 5)<br> }<br> var Color = getRandomColor();<br> $(tTr).find("#item_title").css('color', Color.toString());<br> // 고정据<br> tmp_title.html(selectedItem.data.title);<br> tmp_person.html(selectedItem.data.pubName);<br> tmp_date.html(selectedItem.data.addDate.toString().split(' ') [0].replaceAll('/', '-').toString());<br> btnTitle.click(function () {<br> var heart_date = "";<br> if (selectedItem.data.beginDate .toString() == selectedItem.data.endDate.toString()) {<br> heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-' );<br> }<br> else {<br> heart_date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') " 至 " <br>selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');<br> }<br> .html(heart_date);<br> $("#heart_person").html(selectedItem.data.participator);<br> $ ("#heatr_puber").html (selectedItem .data.pub이름); > 🎜><br>3 중첩 바인딩(대상 데이터 소스에는 여러 배열이 포함되어 있으며 각 배열은 해당 하위 템플릿에 바인딩됨) <br><br>청구서 페이지 예: <br>전면 데스크: <br><br><br> <br><br>코드 복사<br><br><br> 코드는 다음과 같습니다.</div> <div class="codebody" id="code39400"> <br>目标容器 <br><span class="width_level_0 fl nopitch" id="ProductBilling"><br><br> </span><br>외부层模板<br>< div id="ProductBillingTemplate" class="none"><br><dl class="box_pannel_content_filled_special"><br> <dd class="border_none_special_top"><br> <p class="width_level_half_3 fl "></p><br> <span class="width_level_9 fl"><b class="bold" id="bComboName"></b> <b id="bTel"></b></span><br> </dd><br> {{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}<br> <스팬 스타일 ="색상:#FF0000;"> {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span> 固定写법, 第一个参数为数据源中的第二个数组, 第二个为使사용용자模板<br> { {tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}<br> </dl><br></div><br>子模板<br><div id="BillingDetailDateTemplate" class="none"><br><dd class="border_none_special"><br> <p class= "width_level_half_3 fl"></p><br> <p class="width_level_half_12 fl">${(<span style="color:#FF0000;">typeof(Name) == "정의되지 않음 " ? 유형: 이름</span>) ":"}</p> <span style="color:#FF0000;"><br>子模板是三个数据源的公共模板，可能属性的name称会有不同，需要判断</span><br> <span 클래스 ="width_level_1 fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefine" ?<br> 금액 : 초기Amount), 2)} <br> <span class="width_level_5 fl" id="spdescription">${Description}</span><br></dd><br></div><br> </div> <br>后台绑정<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="21646" class="copybut" id="copybut21646" onclick="doCopy('code21646')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code21646"> <br>CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#ProductBilling"), $(t.panelID).find("#ProductBillingTemplate"), billingDetail);<br> // <br> $(t.panelID).find("#ProductBilling").children("dl").each(function (index) {<br> var tTr = this;<br> var selectedItem = $.tmplItem(this) ;<br> var bComboName = $(tTr).find("#bComboName");<br> var bTel = $(tTr).find("#bTel");<br> var n = selectedItem.data;<br> var curAcct = CSSCommonJS.GetCurrentUser(t.masterUser, n.AccountId); // n.BusinessAccountId);<br> var curpstn = "";<br> if (curAcct.AccountType == CSSAccountType.BB) {<br> if (curAcct.DID) {<br> if (curAcct.CountryCode == "1") {<br> curpstn = "(Tel:" CSSCommonJS.FormatUSCAPhone(curAcct.DID) ")"; <br> } <br> else {<br> curpstn = "(전화:" curAcct.DID ")";<br> }<br> }<br> else if (curAcct.BBNumber) {<br> curpstn = "(" curAcct .BBNumber ")";<br> }<br> }<br> else if (curAcct.AccountType == CSSAccountType.HY) {<br> curpstn = "(" curAcct.HYNumber ")";<br> }<br> else if (curAcct.AccountType == CSSAccountType.DSL) {<br> curpstn = "(" curAcct.DSLNumber ")";<br> }<br> bComboName.html(curAcct.ComboName);<br> bTel .html(curpstn);<br> if ((n.BillTransactions.length n.RebateInstances.length n.TopUpDetails.length) == 0) {<br> $(tTr).hide();<br> }<br> $(tTr).find(".border_none_special").each(function (spindex) {<br> var tdd = this;<br> var selectedItem = $.tmplItem(this);<br> var spamount = $ (tdd).find("#spamount");<br> var spdescription = $(tdd).find("#spdescription");<br> if (t.currentAdmin.Valid) {<br> spamount.attr( "title", spamount.attr("title").formatDate(t.masterUser, ""));<br> }<br> else {<br> spdescription.hide();<br> }<br> } );<br> });<br> </div> <br>嵌套绑定是模板自动完成的입니다.</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
