JS Question

[ragtek]

I have this 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?

 

[Kier]

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:

.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):

!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);

 

[ragtek]

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:

.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):

!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

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({