Jquery 模板資料綁定外掛程式的使用方法詳解_jquery

1 綁定後台資料到指定範本（無嵌套，內容均為後台資料原始訊息，前台綁定）
以通話記錄頁為例：
先指定目標容器：

複製程式碼 程式碼如下:

 

   

   

5 bold do 🎜>   

來電者號

   

起始時間

金額($)
   

長度

   

CDR ID

   

  

其次指定範本資料：

複製程式碼

程式碼如下:

🎜>

${CalledStationId}
${ CallingStationId.substr(CallingStationId.indexOf("*") 1)}
${StartTime}
${CSSCommonJS.ChangeDecimal(Revenue,3)}
SvonForm (RevenueTime)}
${Location}
${CdrId}

刪除






後台進行綁定：
 
function RenderTemplatefunction(container, template, data) {

    $(template).tmpl(data).appendTo(container); //原始方法
};
 CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);

2 指定模板中無通配符，後台填充數據（許願牆實現）

前台：


複製代碼

程式碼如下:

 

                  
              

 

 

 

 🎜>           

              

                        
                   

                   

                  
                                

                         

                        div>
        dd>
   

後台進行取得資料綁定，綁定事件等。 🎜>複製程式碼


程式碼如下：

    //取得許願牆資料
    $.get("control/controler.ashx?t=" new Date(), { type: 'heartwall', date: new Date() }, function (data) {
        var jsonData = eval("(" data ")");
        //alert(jsonData.table[1].title);        $("#ItemList").children("dd").each(function (index) {
  var selectedItem = $.tmplItem(this);
            var tmp_title = $(tTr).find("#item_title");
   ).find("#item_title");
 son");
            var tmp_date = $(tTr).find("#item_date");
              var bgNumber = "it" Math.floor(Math .random() * 10 9) ".jpg"; //1-10的隨機數
            var bg = $(tTr).find(".bg"); image', "url('img/bg/" bgNumber "')");
            var getRandomColor = function () {                    return (c ? ment.callee(m, s, c - 1) : '#')
                            })(數學, '0123456789abcdef', 5)
            }
            var Color = getRandom   ', Color.toString());
            // 綁定資料
            tmp_title.html(selectedItem.data.title);
          mp_date.html(selectedItem.data.addDate.toString().split(' ') [0].replaceAll('/', '-').toString());
            btnTitle.click(function () {
                if (selectedItem.data.beginDate .toString() == selectedItem.data.endDate.toString()) {
                    heart_date = selectedItem.data.m.Date.    heart_date = selectedItem.data.m.Date. );
                }
              _date = selectedItem.data.beginDate.toString().split(' ')[0].replaceAll('/', '-') " 至"
selectedItem.data.endDate.toString().split(' ')[0].replaceAll('/', '-');
                }
                $("#heart_title").html(selectedItem.data.title);
    🎜>                $("#heart_date") .html(heart_date);
                $("#heart_person").html(selectedItem.data.participator html(selectedItem.data.contact);
                $ ("#heatr_puber").html(selectedItem.data.pubName);
                //ShowBox
                  $(this).addClass("heartInfo_inline");
                $("#heartInfo_content").show();
           });
        });
    });



3 嵌套綁定（目標資料來源中含有多個數組，分別綁定到對應的子模板）

帳單頁為例：
前台：


複製程式碼

程式碼如下:

目標容器

              border_none_special_top">
                            fl "
                               class="width_level_9 fl">

               
                            BillTransactions) "#BillingDetailDateTemplate"}}
                        pl(RebateInstances) "#BillingDetailDateTemplate"}}  固定，第一個參數為資料來源中的第二個批次，第二個為使用的子範本
                            >                                     >

   

${(typeof(Name) == "未定義" ? 類型：名稱) ":"}
子模板是三個資料來源的公共模板，屬性的名稱可能會有所不同，需要判斷
    ${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "未定義" ?
 金額：初始金額), 2)}
    ${}描述

後台綁定




複製程式碼

複製程式碼複製程式碼

複製碼>

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

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