【JAVASCRIPT】用Javascript模拟实现ASP.NET Repeater控件的基本功能：模板、数据源绑定

前言

----------------------------

通过AJAX刷新列表式的局部页面，我想要能够像ASP.NET的Repeater控件一样，定义好ItemTemplate，然后获取DataSource，DataBind一下就能够自动根据模板绑定其中定义的字段并按照数据源的数据项逐个重复构造。

 

定义HTML模板

----------------------------

 

<div id="divInfos">
    <table border="1">
        <tr>
            <td>ID：</td>
            <td>#InfoID#</td>
        </tr>
        <tr>
            <td>标题：</td>
            <td><a href="#URL#" target="blank">#Title#</a></td>
        </tr>
        <tr>
            <td>发布时间：</td>
            <td>#CreateAt#</td>
        </tr>
    </table>
    <br />
</div>

以下几项定义了要绑定的字段：

#InfoID#      信息记录的ID

#Title#　　    信息记录的标题

#URL#          信息记录的URL

#CreateAt#　信息记录的发布时间

 

id为divInfos的div元素，相当于Repeater的定义。

 

 

数据源定义

----------------------------

[

  { "InfoID" : "12", "URL" : "http://www.baidu.com/", "Title" : "山西王家岭煤矿发生透水事故 123人被困", "CreateAt" : "2010-03-11" },

  { "InfoID" : "22", "URL" : "http://www.baidu.com/", "Title" : "韩国军舰爆炸沉没 各方猜测原因专家意见不一", "CreateAt" : "2010-03-13" },

  { "InfoID" : "34", "URL" : "http://www.baidu.com/", "Title" : "新疆阿克苏地区再次爆发沙尘暴 5个航班取消", "CreateAt" : "2010-03-15" },

  { "InfoID" : "56", "URL" : "http://www.baidu.com/", "Title" : "网传“房地产崩盘时间表” 中国楼市重蹈日本覆辙？", "CreateAt" : "2010-03-16" }

]

 

数据源采用JSON格式进行定义。

 

绑定数据源

----------------------------

假设以上JSON格式的数据源存储在   http://www.some.com/AjaxService.aspx

则调用update方法通过AJAX进行绑定：

$E("divInfos").update(http://www.some.com/AjaxService.aspx);

 

显示效果

----------------------------

 

实现方式

----------------------------

简单的update方法实现代码如下：

 

update: function (url, params) {
    var __this =this;
    if (Hash[__this.getAttribute("id")] ==null|| Hash[__this.getAttribute("id")] =='undefine')
        Hash[__this.getAttribute("id")] = __this.innerHTML;
    //var method = params["method"] == null ? "GET" : params["method"];
var onSuccess = params ==null|| params["onSuccess"] ==null?function () { } : params["onSuccess"];
    Ajax.request({
        url: url,
        method: "GET",
        onComplete: function (responseText) {
            if (responseText =="") {
                __this.hide();
                return;
            }

            var array = eval(responseText);
            if (array instanceof Array) {
                var html = Hash[__this.getAttribute("id")];
                var result ="";
                var regex =new RegExp("#[a-zA-Z]+#", "g");
                var matchs = html.match(regex);

                array.each(function (item) {
                    var temp = html;
                    matchs.each(function (subItem) {
                        var name = subItem.substring(1, subItem.length -1);
                        if (item[name] !=null)
                            temp = temp.replace(subItem, item[name]);
                    });
                    result += temp;
                });

                __this.innerHTML = result;
                __this.show();
            }
        },
        onSuccess: onSuccess,
        onError: function (error) {
            alert(error.toString());
        }
    });
}

 

结束

----------------------------

实现方式很简单，仅仅提供一个思路，希望能够为编写脚本代码的同行们提供一个参考的价值:)