1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）
以通话记录页为例：
首先指定目标容器：
复制代码 代码如下:
被叫号码
主叫号码
起始时间
金额($)
时长
区域
cdr id
其次指定模板数据：
复制代码 代码如下:
${calledstationid}
${callingstationid.substr(callingstationid.indexof(*) + 1)}
${starttime}
${csscommonjs.changedecimal(revenue,3)}
${csscommonjs.gettimeformatstring(revenuetime)}
${location}
${cdrid}
删除
后台进行绑定：
function rendertemplatefunction(container, template, data) {
    $(template).tmpl(data).appendto(container); //原始方法
};
 csscommonjs.rendertemplatefunction($(t.panelid).find(#gvreccalls), $(t.panelid).find(#reccallstemplate), result.cdrdata);
2 指定模板中无通配符，后台填充数据（许愿墙实现）
前台：
复制代码 代码如下:
后台进行取数据绑定，绑事件等。
复制代码 代码如下:
//获取许愿墙数据
    $.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 嵌套绑定 （目标数据源中含有多个数组，分别绑定到对应的子模板）
账单页面为例：
前台：
复制代码 代码如下:
目标容器
外层模板
{{tmpl(billtransactions) #billingdetaildatetemplate}}
                                            {{tmpl(rebateinstances) #billingdetaildatetemplate}}  固定写法，第一个参数为数据源中的第二个数组，第二个为使用的子模板
                                            {{tmpl(topupdetails) #billingdetaildatetemplate}}
子模板
${(typeof(name) == undefined ? type : name) + :}
子模板是三个数据源的公共模板，可能属性的名称会有不同，需要判断
    ${csscommonjs.changedecimal((typeof(initialamount) == undefined ?
 amount : initialamount), 2)}
    ${description}
后台绑定
复制代码 代码如下:
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();
            }
        });
  });
嵌套绑定是模板自动完成的。