Jquery 模板數據綁定插件的使用方法詳解

本篇文章是對在Jquery中模板數據綁定插件的使用方法進行了詳細的分析介紹需要的朋友參考下  

　　 綁定後台數據到指定模板（無嵌套內容均為後台數據原始信息前台綁定）
以通話記錄頁為例
首先指定目標容器

復制代碼 代碼如下:
 <dl class="box_pannel_content_filled_border none" id="gvRecCalls">
   <dd class="bg_blue">
    <p class="width_level_half_ fl nopitch"></p>
    <p class="width_level_half_ bold fl">被叫號碼</p>
    <p class="width_level_half_ bold fl">主叫號碼</p>
    <p class="width_level_half_ bold fl">起始時間</p>
    <p class="width_level_half_ bold fl" id="pAmount">金額($)</p>
    <p class="width_level_half_ bold fl">時長</p>
    <p class="width_level_half_ bold fl">區域</p>
    <p class="width_level_half_ bold fl nopitch" name="pCDRHeader">CDR ID</p>
    <p class="width_level_half_ fl none" name="pSelectCbHeader"></p>
    <p class="width_level_half_ fr none" name="pDeleteCbHeader"></p>
   </dd>
</dl>

　　
其次指定模板數據

復制代碼 代碼如下:
<dl id="RecCallsTemplate" >
<dd >
<p class="center width_level_half_ fl nopitch">
<b class="${CallMode == ? icon_call_in : icon_call_out}" ></b>
</p>
<span class="width_level_half_ fl"><span style="color:#FF;">${CalledStationId}</span></span>
<span class="width_level_half_ fl">${CallingStationIdsubstr(CallingStationIdindexOf("*") + )}</span>
<span class="width_level_half_ fl"  id="Start_time" >${StartTime}</span>
<span class="width_level_half_ fl">${CSSCommonJSChangeDecimal(Revenue)}</span>
<span class="width_level_half_ fl"><span style="color:#FF;">${CSSCommonJSGetTimeFormatString(RevenueTime)}</span></span>
<span class="width_level_half_ fl">${Location} </span>
<span class="width_level_half_ fl nopitch" name="pCDRHeader" >${CdrId}</span>
<p class="right width_level_half_ fr none" name="pSelectCbHeader">
<input  type="checkbox" name="cbSelect" class="label" /></p>
<span class="fl none" name="pDeleteCbHeader">
<button class="crm_btn norm" id="btDelete"><b>刪除</b></button>
</span>
</dd>

</dl>

　　
後台進行綁定
 <script src="Scripts/jquerytmpljs" type="text/javascript"></script>
function RenderTemplatefunction(container template data) {
    $(template)tmpl(data)appendTo(container); //原始方法
};
 CSSCommonJSRenderTemplatefunction($(tpanelID)find("#gvRecCalls") $(tpanelID)find("#RecCallsTemplate") resultCdrData);
指定模板中無通配符後台填充數據（許願牆實現）
前台

復制代碼 代碼如下:
 <div id="content">
                    <! 模板數據>
                    <div id="ItemList">
                    </div>
                    <! 模板數據end>
                </div>
 <div id="ItemTemplate" style="display: none;">
        <dd>
            <div class="items">
                <div class="bg">
                    <div class="info">
                        <a href="#" id="btnTitle"><span id="item_title"></span></a>
                    </div>
                    <div class="k">
                    </div>
                    <div class="person" id="item_person">
                    </div>
                    <div class="date" id="item_date">
                    </div>
                </div>
            </div>
        </dd>
    </div>

　　
後台進行取數據綁定綁事件等

復制代碼 代碼如下:
    //獲取許願牆數據
    $get("control/controlerashx?t=" + new Date() { type: heartwall date: new Date() } function (data) {
        var jsonData = eval("(" + data + ")");
        //alert(jsonDatatable[]title);
        RenderTemplatefunction($("#ItemList") $("#ItemTemplate") jsonDatatable);
        $("#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" + Mathfloor(Mathrandom() * + ) + "jpg"; //的隨機數
            var bg = $(tTr)find("bg");
            bgcss(backgroundimage "url(img/bg/" + bgNumber + ")");
            var getRandomColor = function () {
                return (function (m s c) {
                    return (c ? argumentscallee(m s c ) : #) +
                        s[mfloor(mrandom() * )]
                })(Math abcdef )
            }
            var Color = getRandomColor();
            $(tTr)find("#item_title")css(color ColortoString());
            //綁定數據
            tmp_titlehtml(selectedItemdatatitle);
            tmp_personhtml(selectedItemdatapubName);
            tmp_datehtml(selectedItemdataaddDatetoString()split( )[]replaceAll(/ )toString());
            btnTitleclick(function () {
                var heart_date = "";
                if (selectedItemdatabeginDatetoString() == selectedItemdataendDatetoString()) {
                    heart_date = selectedItemdatabeginDatetoString()split( )[]replaceAll(/ );
                }
                else {
                    heart_date = selectedItemdatabeginDatetoString()split( )[]replaceAll(/ ) + " 至 " +
selectedItemdataendDatetoString()split( )[]replaceAll(/ );
                }
                $("#heart_title")html(selectedItemdatatitle);
                $("#heart_content")html(selectedItemdatacontent);
                $("#heart_date")html(heart_date);
                $("#heart_person")html(selectedItemdataparticipator);
                $("#heart_contact")html(selectedItemdatacontact);
                $("#heatr_puber")html(selectedItemdatapubName);
                //ShowBox
                thishref = "#heartInfo_content";
                $(this)addClass("heartInfo_inline");
                $("#heartInfo_content")show();
                showDialog();
            });
        });
    });

　　
嵌套綁定 （目標數據源中含有多個數組分別綁定到對應的子模板）
賬單頁面為例
前台

復制代碼 代碼如下:
目標容器
<span class="width_level_ fl nopitch" id="ProductBilling">

                                    </span>
外層模板
<div id="ProductBillingTemplate" class="none">
<dl class="box_pannel_content_filled_special">
                                         <dd class="border_none_special_top">
                                             <p class="width_level_half_ fl"></p>
                                                <span class="width_level_ fl"><b class="bold" id="bComboName"></b> <b id="bTel"></b></span>
                                            </dd>
                                         {{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
                                         <span style="color:#FF;">   {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span>  固定寫法第一個參數為數據源中的第二個數組第二個為使用的子模板
                                            {{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
                                        </dl>
</div>
子模板
<div id="BillingDetailDateTemplate" class="none">
<dd class="border_none_special">
    <p class="width_level_half_ fl"></p>
    <p class="width_level_half_ fl">${(<span style="color:#FF;">typeof(Name) == "undefined" ? Type : Name</span>) + ":"}</p> <span style="color:#FF;">
子模板是三個數據源的公共模板可能屬性的名稱會有不同需要判斷</span>
    <span class="width_level_ fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJSChangeDecimal((typeof(InitialAmount) == "undefined" ?
 Amount : InitialAmount) )}</span>
    <span class="width_level_ fl" id="spdescription">${Description}</span>
</dd>
</div>

　　
後台綁定

復制代碼 代碼如下:
CSSCommonJSRenderTemplatefunction($(tpanelID)find("#ProductBilling") $(tpanelID)find("#ProductBillingTemplate") billingDetail);
    //
    $(tpanelID)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 = selectedItemdata;
        var curAcct = CSSCommonJSGetCurrentUser(tmasterUser nAccountId); // nBusinessAccountId);
        var curpstn = "";
        if (curAcctAccountType == CSSAccountTypeBB) {
            if (curAcctDID) {
                if (curAcctCountryCode == "") {
                    curpstn = "(Tel:" + CSSCommonJSFormatUSCAPhone(curAcctDID) + ")";
                }
                else {
                    curpstn = "(Tel:" + curAcctDID + ")";
                }
            }
            else if (curAcctBBNumber) {
                curpstn = "(" + curAcctBBNumber + ")";
            }
        }
        else if (curAcctAccountType == CSSAccountTypeHY) {
            curpstn = "(" + curAcctHYNumber + ")";
        }
        else if (curAcctAccountType == CSSAccountTypeDSL) {
            curpstn = "(" + curAcctDSLNumber + ")";
        }
        bComboNamehtml(curAcctComboName);
        bTelhtml(curpstn);
        if ((nBillTransactionslength + nRebateInstanceslength + nTopUpDetailslength) == ) {
            $(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 (tcurrentAdminValid) {
                spamountattr("title" spamountattr("title")formatDate(tmasterUser ""));
            }
            else {
                spdescriptionhide();
            }
        });
  });

　　
嵌套綁定是模板自動完成的

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20069.html