Thursday, March 13th, 2008

Getting some $ with Dojo

Category: Articles, Dojo, JavaScript

bling

Neil Roberts has posted a great article on Creating Your Own $ with Dojo:

The bling, one of the best global variables in JavaScript. A tool which has come to mean, as a function, a way to locate a node or set of nodes. And, as a namespace, a simple way to access often-used functionality. “This can’t be done with Dojo,” you insist. But you’re wrong, it’s really easy. The ideas behind this little symbol are quite simple and I’m going to show you how to create your own customized version of it.

He manages to walk us through a path where he gets $ working in a way that mimics jQuery. He starts with $ = dojo.query; and ends up with:

javascript

  1. $ = dojo.mixin(function(){ return dojo.mixin(dojo.query.apply(this, arguments), $.fn); }, dojo, { fn: {} });

He then tackles plugins and using:

javascript

  1. $.fn.click = function(callback){
  2.   dojo.forEach(this, function(node){
  3.     dojo.connect(node, "onclick", function(e){
  4.       callback.call(e.target, e);
  5.     });
  6.   });
  7. }

You end up being able to do:

javascript

  1. $("li.expandable").click(function(e){
  2.   $(this).toggleClass("expanded");
  3. });

Very cool indeed!

Posted by Dion Almaer at 6:59 am
2 Comments

++++-
4 rating from 34 votes

2 Comments »

Comments feed TrackBack URI

Great work, looks like the following syntax is also accepted:

$([‘li.expandable”, “#myID”], startNode)

Comment by Les — March 13, 2008

Excellent article, which explains how to do jQuery-like APIs without a magic hand waving. Instead of “magic” it actually empowers users to implement similar APIs if the need arises. Keep up the good work!

Comment by elazutkin — March 13, 2008

Leave a comment

You must be logged in to post a comment.