When This is This and What is This, but What is not This, Dojo Event and Objects

In the past couple of years, I have been building Dojo Bootstrap widgets from stratch rather than using standard Dojo widgets and styling using a Bootstrap theme.  Why in the world would you do that might you ask.  Sometimes I also ask myself that question. There are many advantages, including adding security features that are not founded normally. Since we RESTFul JSON services, the widgets are optimized for our format.  In addition, the widgets are automatically binded with the RESTFul JSON services when the web page is instantiated. 

So as part of my Dojo adventures, I had to learn and relearn Dojo again and again. There is so many different ways to do things, but the right way is sometimes elusive.  One advantage of Dojo over JQuery is that Dojo forces you to use a pattern for creating widgets which I really like.  It is hard enough for me to follow what I did 2 months ago.  Imagine if another developer had to follow my code years later.

One problem is that like all software development, there are lot of stuff that are not written down in the documentation and they just assumed that you know it.  So here is a few important things that I learned that is extreme helpful.

If you use Bootstrap widgets, the HTML below is very familar to you.

<div class="widget" id="happy">
<ul>
<li id="1">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="2">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="3">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="4">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
<li id="5">
  <a href="#" tabindex="-1"><i class="icon-tools"></i>Hello</a>
 </li>
</ul>
</div>

To connect this widget to an event you can use this simple few lines of code where "e" is the event handler.

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.tagName);
});

or for even shorter number of characters:

dojo.query('ul > li',this.domNode).onclick(function(e){
  alert(e.target.tagName);
});

So when you click on the widget, an alert box will appear with the tagname of the element. But what if you want to display the id of the widget. You could get it by using:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
  alert(e.target.parentNode.parentNode.parentNode.id );
});

as long as you click on the A tag. However, if you click on the "I" tag then you would need to use

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.parentNode.parentNode.id );
});

An easier way is to pass the reference of the widget itself which is defined in Dojo as "this".  This can be accomplished by passing it as an argument:

dojo.query('ul > li',this.domNode).connect('onclick',this,function(e){
 alert(this.id);
});

So "this" is "this". Much easier isn't it. You can also redefine "this" as "what" and accomplish the same thing.

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(what.id);
});

So what if you need to determine the id of the "LI" tag that you have clicked on, which is typical of a widget like a listbox, combobox, or menu? Again you can use the following if you clicked on the "A" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.id );
});

or if you click on the "I" tag:

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(e.target.parentNode.parentNode.id );
});

This can get messly and this was what I was doing until I figured it out through experimentation. You can not find this in Dojo documentation. In this scenario, if you need to get the id of the LI tag, the reference of the "LI" tag is "this" since we are using dojo.query('ul > li') to define an event array.
 

dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // equal "3" when you click on the LI tag with id="3"
});

So no matter if you are clicking on the "A" tag or "I" tag you have the reference of the "LI" tag.
Now, if you also need to reference the widget itself you do not want to pass the reference of the widget as an argument as we did before.  That is because your will override the reference of LI with the reference of the widget.  So in order to reference the widget you need to define "this" as "what"

var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(this.id);  // "3"
 alert(what.id);  //"happy"

});

So now "what" is not "this". I hope "this" was helpful to you.  Coming soon I will let you know "what" you can do to tie events to dialog box event responses.