SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This keyword in callback within object.

    Hi,

    I'm creating a list with buttons that show and hide some of the list elements to create the effect of scrolling. I've built an scrollList object so I can apply this to any list. When you create the object and pass it the id of the <ul> and how many items of the list you want to be displayed. It will add the scroll down and scroll up links and add an Event.observe to them (I'm using the Prototype library).

    This code creates the object
    Code:
    var main_news_articles;
    main_news_articles = new scrollList('main_news_articles', 5);
    main_news_articles.init();
    The problem I am having is with the callback functions of the onclick event of the links (scrollUp and scrollDown). The this keyword within these functions is refering to the link and not the object.

    To try and solve this I've made the title attribute of the link the same as the variable name of the scrollList object. I can reference the scrollList object like so...

    Code:
    /* Call back functions */
    /* eval(this.title) in the following is the title of the link 
    clicked to fire this event. The title is the name of the 
    object so in this case this.title is 
    equal to 'main_news_articles' */
    
    this.scrollUp = function(){
            /* start and end are the indexs of where to start and stop displaying the list (see full object below) */
    	eval(this.title).start--;
    	eval(this.title).end--;
            /* displayList redraws the list */
    	eval(this.title).displayList();
    }
    	
    this.scrollDown = function(){
            eval(this.title).start++;
    	eval(this.title).end++;
    	eval(this.title).displayList();
    }
    ... but not in Internet Explorer (I'm using IE6).

    So can I make eval(this.title) reference my object or am I going about the this keyword in callbacks problem wrong? Any help appreciated massively. I've included the complete object below.

    Thanks

    Here is the scrollList class
    Code:
    function scrollList(id, num) 
    {
    	this.init = function(){
    	
    		this.getList();
    		new Insertion.Before(this.id, this.updiv);
    		new Insertion.After(this.id, this.dwndiv);
    		this.displayList();
    	}
    	
    	this.getList = function(){
    		var ul = $(this.id);
    		var list = ul.getElementsByTagName('li');
    		this.list = list;
    		
    	}
    	
    	this.scrollUp = function(){
    		eval(this.title).start--;
    		eval(this.title).end--;
    		eval(this.title).displayList();
    	}
    	
    	this.scrollDown = function(){
    		eval(this.title).start++;
    		eval(this.title).end++;
    		eval(this.title).displayList();
    	}
    
    	this.displayList = function(){
    		this.displayLinks();
    		for (i=0;i<this.list.length;i++)
    			{
    			if (i >= this.start && i <= this.end)
    			{
    				$(this.list[i].id).show();
    			} else {
    				$(this.list[i].id).hide();
    			}
    		}
    	}
    	
    	this.displayLinks = function(){
    		if (this.start == 0){
    			$(this.scr_up_div_id).update(this.up_non_link);
    		} else {
    			$(this.scr_up_div_id).update(this.uplink);
    			Event.observe(this.scr_up_link_id, 'click', this.scrollUp);
    		
    		}
    		if (this.end == (this.list.length - 1)){
    			$(this.scr_dwn_div_id).update(this.dwn_non_link);
    		} else {
    		
    			$(this.scr_dwn_div_id).update(this.dwnlink);
    			Event.observe(this.scr_dwn_link_id, 'click', this.scrollDown);
    		}
    	}
    	
    	this.id = id;
    	this.num = num;
    	this.ul = null;
    	this.list= null;
    	this.start = 0;
    	this.end = (this.num - 1);
    	this.scr_up_link_id = this.id + '_up_link';
    	this.scr_up_div_id = this.id + '_up_div';
    	this.uplink = '<a title="' + this.id + '" id="' + this.scr_up_link_id + '" href="#">up</a>';
    	this.up_non_link = '<span>up</span>';
    	this.updiv = '<div id="' + this.scr_up_div_id + '"></div>';
    	this.scr_dwn_link_id = this.id + '_dwn_link';
    	this.scr_dwn_div_id = this.id + '_dwn_div';
    	this.dwnlink = '<a title="' + this.id + '"  id="' + this.scr_dwn_link_id + '" href="#">down</a>';
    	this.dwn_non_link = '<span>down</span>';
    	this.dwndiv = '<div id="' + this.scr_dwn_div_id + '"></div>';
    	this.dir = '';
    	
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where you have
    Code:
    Event.observe(this.scr_up_link_id, 'click', this.scrollUp);
    I think you want:
    Code:
    Event.observe(this.scr_up_link_id, 'click', this.scrollUp.bindAsEventListener(this));
    which will make 'this' inside the callback refer to the class, rather than the element. Not sure what you're trying to do with the calls to eval() though, but I'm fairly sure they're not necessary...

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works, thanks a million!

    Yeah the eval bit was very hacked - surprised it worked at all! But firefox knew what i was getting at


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •