dojo.lang.hitch

| | Comments (0) | TrackBacks (0)

A few weeks ago, I was wrestling with one of those things that I used to consider a major pain with javascript: meshing objects and event handling.

Let's say you have some code. Sloppy, but demonstrative:

<html>
<head>
<script lanugage='Javascript' src='dojo/dojo.js'></script>
<script>
dojo.require("dojo.lang.*");
</script>
</head>
<body>
<div id='output' name='output'></div>
<script language='Javascript'>
function foo() {
var x;
var y;
this.go = function() {document.getElementById('output').innerHTML += 'this.x is ' + this.x + '<br />';}
}
var fooz = new foo;
fooz.x = 5;
document.getElementById('output').innerHTML += 'fooz.x is ' + fooz.x + '<br />';
setTimeout(fooz.go, 300);
</script>
</body>
</html>

What happens when you run it?

fooz.x is 5 this.x is undefined

Javascript objects do not stay instantiated when passed into setTimeout. setTimeout() is unavoidable, but I often find that when implementing behaviors which need objects, you're forced into one of two nasty choices:

  • Give everything an id, and pass that id into setTimeout in order to maintain some sort of scope
  • Watch everything lose context when passing through setTimeout

Not pretty choices.

But dojo.hang.hitch() solves that problem, gloriously. dojo.lang.hitch lets you attach a function to run IN THE SCOPE of an object.

Let's change the code above:

<html>
<head>
<script lanugage='Javascript' src='dojo/dojo.js'></script>
<script>
dojo.require("dojo.lang.*");
</script>
</head>
<body>
<div id='output' name='output'></div>
<script language='Javascript'>
function foo() {
var x;
var y;
this.go = function() {document.getElementById('output').innerHTML += 'this.x is ' + this.x + '<br />';}
}
var fooz = new foo;
fooz.x = 5;
document.getElementById('output').innerHTML += 'fooz.x is ' + fooz.x + '<br />';
setTimeout(dojo.lang.hitch(fooz, fooz.go), 300);
</script>
</body>
</html>

Output now:

fooz.x is 5
this.x is 5

Beautiful.

What's great is that this lets you run events on things without IDs. I dynamically instantiate a lot of elements in the DOM with document.createElement, and there's often no NEED to assign an id except for issues like this; handling events. Now, with DOJO's hitching, you can deal with your objects while preserving context through setTimeout calls.

Dojo is filled with gems.

Check out the Dojo Homepage and this little into to dojo isn't bad either.

0 TrackBacks

Listed below are links to blogs that reference this entry: dojo.lang.hitch.

TrackBack URL for this entry: http://www.mattwallace.net/mt-tb.cgi/62

Leave a comment

September 2010

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Creative Commons License
This weblog is licensed under a Creative Commons License.

About The Author

Matt Wallace is a cloud computing architect, and recovering Web Application Developer working on a large e-commerce site and dabbling in social networking applications. He has recurring dreams of manipulating the real world with jQuery.