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

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

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

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

其次指定模板數據：

復制代碼 代碼如下:
<dl id="RecCallsTemplate" >
<dd >
<p class="center width_level_half_2 fl nopitch">
<b class="${CallMode == 1 ? 'icon_call_in' : 'icon_call_out'}" ></b>
</p>
<span class="width_level_half_5 fl"><span style="color:#FF0000;">${CalledStationId}</span></span>
<span class="width_level_half_5 fl">${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}</span>
<span class="width_level_half_6 fl"  id="Start_time" >${StartTime}</span>
<span class="width_level_half_4 fl">${CSSCommonJS.ChangeDecimal(Revenue,3)}</span>
<span class="width_level_half_4 fl"><span style="color:#FF0000;">${CSSCommonJS.GetTimeFormatString(RevenueTime)}</span></span>
<span class="width_level_half_10 fl">${Location} </span>
<span class="width_level_half_4 fl nopitch" name="pCDRHeader" >${CdrId}</span>
<p class="right width_level_half_2 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/jquery.tmpl.js" type="text/javascript"></script>
function RenderTemplatefunction(container, template, data) {
    $(template).tmpl(data).appendTo(container); //原始方法
};
 CSSCommonJS.RenderTemplatefunction($(t.panelID).find("#gvRecCalls"), $(t.panelID).find("#RecCallsTemplate"), result.CdrData);
2 指定模板中無通配符，後台填充數據（許願牆實現）
前台：

復制代碼 代碼如下:
 <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/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");