1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JS Question

Discussion in 'XenForo Development Discussions' started by ragtek, Jan 25, 2011.

  1. ragtek

    ragtek Guest

    I have this code:
    Code:
    !function($, window, document, _undefined)
    {
    
        Ragtek.Sidebar = function($element){
            this.__construct($element);
        };
        Ragtek.Sidebar.prototype =
        {
            __construct: function($link){
                this.$link = $link;
                console.log('init sidebar');
    console.log($link);
                $link.click($.context(this, 'click'));
            },
            click: function(e){
                console.log('event called');
            }
        }
    
        XenForo.register('#switchButton', 'Ragtek.Sidebar');
    }
    (jQuery, this, document);
    
    I thought that the click function is only loaded, when i click on $link, but it's called on the pageload.
    Where's the problem?:D
     
  2. Kier

    Kier XenForo Developer Staff Member

    I assume you've solved this, but there are two approaches. One is to use our $.context() function to apply 'this' scope to the function that handles the event:
    Code:
    .toggle($.context(function()
    {
    	console.log(this);
    	this.$togglebutton.removeClass("switchside_r").addClass("switchside_l");
    	this.$main.removeClass("mainContainer");
    	//...
    }, this)
    The other is preferable for small chunks of functionality as you have here, and it involves using closures exclusively, rather than trying to emulate OOP. That would see your code changed around to work like this (ignore the actual functionality, it's just a demo of the approach):
    Code:
    !function($, window, document, _undefined)
    {
    	Ragtek.Sidebar = function($link)
    	{
    		var myColor = 'red';
    		console.log('init sidebar with %o', $link);
    		$link.click(function(e)
    		{
    			console.log('event called');
    			$link.css('background-color', myColor); // both $link and myColor come from the parent code
    		});
    	};
    
        XenForo.register('#switchButton', 'Ragtek.Sidebar');
    }
    (jQuery, this, document);
     
    Darkimmortal likes this.
  3. ragtek

    ragtek Guest

    Yes, i 've solved it with an global var, because i didn't know how to use the $.context within the toggle() function

    Code:
    this.$togglebutton = $('<span id="switchButton" class="switchside_r" title="toggle sidebar"></span> ')
    .appendTo(this.$container);
    var that = this;
                this.$togglebutton
                .click()
                .toggle(
                            function()
                            {
                                that.$sidebar.animate({
     

Share This Page