Javascript MVC 翻页控件 版本二

本版本实现了令一个版本的翻页控件，突出MVC结构，抽象通用的基础类为xComponent，继承xComponent实现的Pager将实现render，并自定义添加事件。以及事件方法。

重新更新：将view提取出来单独设计。这样view就可以面向显示。moduler描述对象。

 

<script>
var xComponent =function(module,container,view){
this.view=view;
this.Module=module;
this.container=container||this.container;
this.events={};

this.addEvent=function(e,handler){
                var defined=false;
                for(var e in this.events)
                {
                    if(this.events[e].event===e)
                    {
                        this.events[e].push(handler);
                        defined=true;
                    }
                }
                if(!defined)
                {
                    this.events[e]=[];
                    if(typeof handler==="function")
                    {
                        this.events[e].push(handler);
                    }
                }
 }
this.tiggerEvent=function(e,eventArgs){
                for(var ev in this.events)
                {
                    if(ev===e)
                    {
                        for(var j=0;j<this.events[ev].length;j++)
                            this.events[ev][j].call(this.Module,arguments[1]);
                    }
                }
}
this.proxy=function(el,ev,fun,args)
{
    var _self=this;
    if(el.addEventListener)
    el.addEventListener(ev,function(){_self[fun].call(_self,args)});
    else if (el.attachEvent)
    el.attachEvent("on"+ev,function(){_self[fun].call(_self,args)});
}


 return this;

}
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var xPager=function(args,container,view){
var _pager=new xComponent({
                PageIndex:0,
                NextText:"下一页",
                PrevText:"上一页",
                PageSize:args.pagesize,
                RecordCount:args.recordcount,
                GetPageCount:function(){return this.RecordCount/this.PageSize}
},container,view);

_pager.addEvent("pagechanged");
_pager.render=function()
{
    var _self=this;
    if(this.view)
    {
        this.view.call(_self);
        return;
    }
}
_pager.pageIndexChange=function(args)
{
    this.Module.PageIndex=args.index;
    this.render();
    this.tiggerEvent("pagechanged",args);
}
return _pager;
}

//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function view()
{
    var _self=this;
    var str_ary=["<a href='javascript:void(0)' rel='prev'>"+_self.Module.PrevText+"</a>"];
        for(var i=0;i<_self.Module.GetPageCount();i++)
        {
            if(i===_self.Module.PageIndex)
                str_ary.push("<span rel='"+i+"'>"+(i+1)+"</span>");
            else
                str_ary.push("<a href='javascript:void(0)' rel='"+i+"'>"+(i+1)+"</a>");
        }
        str_ary.push("<a href='javascript:void(0)' rel='next'>"+_self.Module.NextText+"</a>")
        _self.container.innerHTML=str_ary.join(" &nbsp;");
        var links=_self.container.getElementsByTagName("a");
        for(var i=0;i<links.length;i++)
        {

            if(parseInt(links[i].rel).toString()!=="NaN")
                this.proxy(links[i],"click","pageIndexChange",{sender:links[i],index:parseInt(links[i].rel)});
            else if(links[i].rel=="next")
            {
                this.proxy(links[i],"click","pageIndexChange",{sender:links[i],index:parseInt(_self.container.getElementsByTagName("span")[0].attributes["rel"].value)+1});
            }
            else if(links[i].rel=="prev")
                this.proxy(links[i],"click","pageIndexChange",{sender:links[i],index:parseInt(_self.container.getElementsByTagName("span")[0].attributes["rel"].value)-1});
        }
}
var pager=new xPager({pagesize:2,recordcount:20},document.getElementById("target"),view);
pager.render();
pager.addEvent("pagechanged",function(args){alert(args.index);});

</script>