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

JS Question

R

ragtek

Guest
#1
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
 

Kier

XenForo Developer
Staff member
#2
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);
 
R

ragtek

Guest
#3
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);
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({