Simple MooTools Event / Class Binding

One thing that can be difficult to wrap your head around is "binding." Binding allows you to use the this reference at times that you normally cannot. Let me show you how to use basic MooTools binding using an easy test case.

Lets pretend that we have a MooTools class created with a method called showMessage() which has the sole purpose of using JavaScript's alert() function to pop up a message. The message is an option, so its variable representation is this.options.message. This will work fine within any method, but the addEvent() throws things off.

The Problem MooTools Code

//more class code above....
	
	showMessage: function() {
		
		$('myelement').addEvent('click', function() {
			alert(this.options.message);
		});
		
	},
	

//more class code below

The addEvent() method of the Element causes the this.options.message reference to throw a JavaScript error. What we need to do here is bind the class to the event.

The MooTools Solution

//more class code above....
	
	showMessage: function() {
		
		$('myelement').addEvent('click', function() {
			alert(this.options.message);
		}.bind(this));
		
	},
	

//more class code below

We bind the class to the event's function and now can reference the class (and its options -- in this case its message option) by using this.

MooTools binding can be a difficult idea to understand. To learn more about binding, check out the MooTools documentation.