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 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
vue.js循环radio的实例
Nov 07 Javascript
JS实现炫酷轮播图
Nov 15 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
实用函数9
2007/11/08 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
介绍Python中的__future__模块
2015/04/27 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Mac安装python3的方法步骤
2019/08/09 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
PHP笔试题
2012/02/22 面试题
请解释流与文件有什么不同
2016/07/29 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
十岁生日同学答谢词
2014/01/19 职场文书
大学社团计划书
2014/05/01 职场文书
中班下学期个人总结
2015/02/12 职场文书
感恩教师节主题班会
2015/08/12 职场文书