Don't Get Disconnected with Connect

Here is another of my "My Experience in Building Dojo Widgets" post.

Dojo.connect (dojo/on) is a versatile and important part of dojo that handle events.  Along with dojo.subscribe and dojo.publish these three features of Dojo provide a powerful set of tools to query the DOM.

<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>

Referencing my widget that I used in my last blog, I can connect this list widget using the following lines of code and create event responses accordingly.

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

If this list widget does not change throughout the existence of this page, this code is perfectly fine.

Let say that during the use of this web page the list needs to be updated.  If you clear the list using for example dojo.destroy or dojo.empty and repopulate the page, you can reapply dojo.connect and it will work.  However, the connections to the previous DOM nodes that you have destroyed still exist in Dojo.  Normally, this is fine though you use up more and more memory. 

However, in a more complex widget where the behavior of list DOM Nodes is different, this will come and bite you.  For example, below is a grid that has a toolbar with buttons and dropdown buttons that is dynamic.

In this widget, the toolbar will change depending on what tab you select in a tab widget that is on the same page.  If you open the button menu and click outside of the menu we want the menu to close.  However when you destroy the first toolbar and create the second, the dojo event handler still thinks that the first toolbar is there.  So the connection for closing the menu is still there and if you click anywhere on the body of the page, you will create a nasty JavaScript error.  

In order t remedy the situation, dojo provide dojo.disconnect.  Dojo.disconnect removes any event connection created by dojo.connect.  In order to disconnect an event you need to get a handle to the connection.  So from our previous example, we can assign a handle to the connections.

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

Since we are creating a list of connections "handle" is an array of connections. So when you what to refresh the list, we need to first get an array of handles so that we can disconnect them before rebuilding the widget DOM. So we first need to declare an array to store the list of handles.  I normally declare this in the widget constructor:

constructor:function(){
    this.connections=[];
});

So before you refresh the list widget and add new DOM nodes disconnect any existing connections that the widget has then destroy the DOM nodes, rebuild the DOM nodes, and store the new connection handles into the disconnect array, this.connections.  Therefore, the code for creating event connections becomes.

dojo.forEach(this.connections,function(connection){
      dojo.disconnect(connection);
});
var listNode=dojo.query('ul',this.domNode)[0];
dojo.empty(listNode);
var handle=dojo.query('ul > li',this.domNode).connect('onclick',function(e){
      alert(e.target.tagName);
});
this.connections.push.apply(this.connections,handle);

Hope this was useful.