Jquery 模板数据绑定插件 使用方法

1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）

以通话记录页为例：

首先指定目标容器：

 

                            	

                               
                                

                                
被叫号码
                                
主叫号码
                                
起始时间
                                
金额($)
                                
时长
                                
区域
                                
CDR ID
                                

                                

                                
                                

其次指定模板数据：

${CalledStationId}
${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}
${StartTime}
${CSSCommonJS.ChangeDecimal(Revenue,3)}
${CSSCommonJS.GetTimeFormatString(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 指定模板中无通配符，后台填充数据（许愿墙实现）

前台：

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

    //获取许愿墙数据
    $.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('/', '-');
                }
                $("#heart_title").html(selectedItem.data.title);
                $("#heart_content").html(selectedItem.data.content);
                $("#heart_date").html(heart_date);
                $("#heart_person").html(selectedItem.data.participator);
                $("#heart_contact").html(selectedItem.data.contact);
                $("#heatr_puber").html(selectedItem.data.pubName);
                //ShowBox
                this.href = "#heartInfo_content";
                $(this).addClass("heartInfo_inline");
                $("#heartInfo_content").show();
                showDialog();
            });
        });
    });

3 嵌套绑定 （目标数据源中含有多个数组，分别绑定到对应的子模板）

账单页面为例：

前台：

目标容器 

                                    	
                                    
外层模板


                                        	

                                            	

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

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