The first time I read the manual pages for dojo.connect, I didn’t realize how powerful dojo.connect really is. For a long time I have used it effectively to connect to mouse clicks and other events but there are way more powerful features than those.

Have you ever asked yourself if it was possible to connect to an event called “onComplete” for an upload class you created?
Now here it goes:

Let’s declare an object we want to be able to connect to:

dojo.declare("dojoc.uploader", null, {
 
});

This will enable us to create an instance of dojoc.uploader by calling

var loader = new dojoc.uploader();

Lets assume we have a method in dojoc.uploader to upload something and a method which gets called when the upload is complete, called “onComplete”:

dojo.declare("dojoc.uploader", null, {
    upload: function(){
        // do upload here
        this.onComplete();
    },
 
    onComplete: function(){
        /**
         * leave it empty, it is just a placeholder so we can connect to it
         * of course you can execute standard code you always want to call 
         */
    }
});

Now all you need to do is to create a new instance of dojoc.uploader, connect to onComplete and call the upload method:

var uploader = new dojoc.uploader();
dojo.connect(uploader, "onComplete", function(){
    // do whatever you want to do when complete
});
uploader.upload();

Once the upload is complete it will call the onComplete method, you connected to. Therefore the function you added to the connect will be called.
Fancy isn’t it?

So to summarize: Whenever you want to be able to connect to an event which occurs at a certain point in the execution of a class, just make the class call a method such as “onComplete”, “onDownload” or something what describes that event. This will enable you to connect to that method and whenever it is been called you can hook into the code execution.

A little trick on the side: say you want to upload several files. When do you know that all files are uploaded successfully?
Since they could have different sizes, one file could be done faster than the other and just connecting to onComplete wouldn’t work.
Use counters to do that:

dojo.declare("dojoc.uploader", null,{
    constructor: function(){ 
        this.files = []; 
    },
 
    upload: function(){
        cnt = this.files.length // the files are stored in the files var
        dojo.forEach(files, function(file){
            // do upload here
            if (cnt == 1){
                this.onComplete(); // call the method we can connect to
            }    
            cnt--;
        }, this);
    },
 
    onComplete: function(){
        /**
         * leave it empty, it is just a placeholder so we can connect to it
         * of course you can execute standard code you always want to call 
         */
    }
});

Tags: dojo.connect, dojo.declare