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


Posted in Javascript onJuly 08, 2013

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");
            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 嵌套绑定 (目标数据源中含有多个数组,分别绑定到对应的子模板)
账单页面为例:
前台:
目标容器 
<span class="width_level_0 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_3 fl"></p>
                                                <span class="width_level_9 fl"><b class="bold" id="bComboName"></b> <b id="bTel"></b></span>
                                            </dd>
                                         {{tmpl(BillTransactions) "#BillingDetailDateTemplate"}}
                                         <span style="color:#FF0000;">   {{tmpl(RebateInstances) "#BillingDetailDateTemplate"}}</span>  固定写法,第一个参数为数据源中的第二个数组,第二个为使用的子模板
                                            {{tmpl(TopUpDetails) "#BillingDetailDateTemplate"}}
                                        </dl>
</div>
子模板
<div id="BillingDetailDateTemplate" class="none">
<dd class="border_none_special">
    <p class="width_level_half_3 fl"></p>
    <p class="width_level_half_12 fl">${(<span style="color:#FF0000;">typeof(Name) == "undefined" ? Type : Name</span>) + ":"}</p> <span style="color:#FF0000;">
子模板是三个数据源的公共模板,可能属性的名称会有不同,需要判断</span>
    <span class="width_level_1 fl" id="spamount" title = "{{= CreateDate }}">${CSSCommonJS.ChangeDecimal((typeof(InitialAmount) == "undefined" ?
 Amount : InitialAmount), 2)}</span>
    <span class="width_level_5 fl" id="spdescription">${Description}</span>
</dd>
</div>

后台绑定
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();
            }
        });
  });

嵌套绑定是模板自动完成的。
Javascript 相关文章推荐
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
JS定义回车事件(实现代码)
Jul 08 #Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 #Javascript
使用js 设置url参数
Jul 08 #Javascript
复制js对象方法(详解)
Jul 08 #Javascript
Javascript拓展String方法小结
Jul 08 #Javascript
解析js原生方法创建表格效率测试
Jul 08 #Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 #Javascript
You might like
什么是MVC,好东西啊
2007/05/03 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python使用requests.session模拟登录
2019/08/09 Python
python中class的定义及使用教程
2019/09/18 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
管道维修工岗位职责
2013/12/27 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
2014年教研工作总结
2014/12/06 职场文书
2015年酒店工作总结
2015/04/28 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
python字典的元素访问实例详解
2021/07/21 Python