Detailed explanation of how to use Jquery template data binding plug-in_jquery

1 Bind the background data to the specified template (no nesting, the content is the original information of the background data, front-end binding)
Take the call record page as an example:
First specify the target container:

Copy code The code is as follows:

        

Calling number

                                                                                                                            

 

Amount($)

 

Duration

 

Region

 

CDR ID< /p>

< /p>

Secondly specify the template data:

Copy code The code is as follows:

< span class="width_level_half_5 fl">${CalledStationId}

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

Delete

Binding in the background:

function RenderTemplatefunction(container, template, data) {
$(template).tmpl(data).appendTo(container); //Original method
};
CSSCommonJS. RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);
2 There are no wildcards in the specified template. Filling data in the background (wishing wall implementation)
Front desk:

Copy code The code is as follows:

 

                   
                   

                   

                   
               

 

       

           

               

                   

                       
                   

                   

                   

                   

                   

                   

                   

               

           

       

   

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

复制代码 代码如下:

    //获取许愿墙数据
    $.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('/', '-');
                }
                                                                                                                                                                                  through .html(heart_date);
$("#heart_person").html(selectedItem.data.participator);
$ ("#heatr_puber").html (selectedItem.data.pubName); );
                                                                                                       🎜>

3 Nested binding (the target data source contains multiple arrays, each bound to the corresponding sub-template)

Bill page as an example:
Front desk:




Copy code

The code is as follows:

目标容器


                                   
外层模板

                                         

                                             

                                               
                                           

                                         {{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
                                            {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}  固定写法，第一个参数为数据源中的第二个数组，第二个为使用的子模板
                                            {{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
                                       

子模板

   

   

${(typeof(Name) == "undefined" ? Type : Name) ":"}

子模板是三个数据源的公共模板，可能属性的名称会有不同，需要判断
    ${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefined" ?
 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"）。各（function（spindex）{
var tdd = this;
var seleceditem = $ .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();
}
} );
});

嵌合決定はモジュールによって自動的に行われます。