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

程序员文章站 2022-10-22 23:44:42

1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）以通话记录页为例：首先指定目标容器： . 代码如下:

1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）
以通话记录页为例：
首先指定目标容器：

. 代码如下:

其次指定模板数据：

. 代码如下:

<dl id="reccallstemplate" >
<dd >



${calledstationid}
${callingstationid.substr(callingstationid.indexof("*") + 1)}
${starttime}
${csscommonjs.changedecimal(revenue,3)}
${csscommonjs.gettimeformatstring(revenuetime)}
${location} 
${cdrid}

<input type="checkbox" name="cbselect" class="label" />

<button class="crm_btn norm" id="btdelete">删除</button>

</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 指定模板中无通配符，后台填充数据（许愿墙实现）
前台：

. 代码如下:

<dd>
 
 
 
 <a href="#" id="btntitle"></a>
 
 
 
 
 
 
 
 
 
 </dd>

后台进行取数据绑定，绑事件等。

. 代码如下:

    //获取许愿墙数据
    $.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 嵌套绑定（目标数据源中含有多个数组，分别绑定到对应的子模板）
账单页面为例：
前台：

. 代码如下:

目标容器


 
外层模板

<dl class="box_pannel_content_filled_special">
 <dd class="border_none_special_top">
 
 
 </dd>
 {{tmpl(billtransactions) "#billingdetaildatetemplate"}}
 {{tmpl(rebateinstances) "#billingdetaildatetemplate"}} 固定写法，第一个参数为数据源中的第二个数组，第二个为使用的子模板
 {{tmpl(topupdetails) "#billingdetaildatetemplate"}}
 </dl>

子模板

<dd class="border_none_special">
 
 ${(typeof(name) == "undefined" ? type : name) + ":"} 
子模板是三个数据源的公共模板，可能属性的名称会有不同，需要判断
 ${csscommonjs.changedecimal((typeof(initialamount) == "undefined" ?
amount : initialamount), 2)}
 ${description}
</dd>

后台绑定

. 代码如下:

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();
            }
        });
});

嵌套绑定是模板自动完成的。

上一篇：笑话短信网络常用的语言

下一篇：笑喷男女,喷的很有道理!

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

详解jQuery uploadify文件上传插件的使用方法