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 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
layUI实现列表查询功能
Jul 27 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
javascript实现前端分页功能
Nov 26 Javascript
JavaScript实现简单动态表格
Dec 02 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
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
python绘制圆柱体的方法
2018/07/02 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
五好党支部事迹材料
2014/02/06 职场文书
活动策划邀请函
2014/02/06 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
2014年销售部工作总结
2014/12/01 职场文书
入党介绍人考察意见
2015/06/01 职场文书
遗嘱格式范本
2015/08/07 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server