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>