Skip to main content

Don't What it, Hitch It

Async callbacks and closures is an incredible thing about JavaScript.   This is what makes environments like nodejs possible, a topic of many blogs to come.  Many of the JavaScript frameworks like my favorite framework Dojo have the ability to deal with closures and callbacks.  One of the issues that one needs to deal with is getting a handle to the current scope within a closure.

We discussed this and how to deal with it in Dojo in a previous blog.

http://dominointerface.blogspot.com/2014/03/when-is-this-is-this-and-what-is-this.html


The nice thing about Dojo is how extensive the library is.  This is also a negative thing since there is so many features that you might not beware of. As I am converting our iPhora library from Dojo 1.53 to Dojo 1.10.0, I realized there is also another method that you can use to get a handle to the current scope within a closure and that is dojo.hitch which has been around for a long time. 

In our previous example, we had a simple widget.

<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 get handle to this within the closure, you can use this method
dojo.query('ul > li',this.domNode).connect('onclick',this,function(e){
 alert(this.id);
});


or define "what" equal to "this" to get a handle
var what=this;
dojo.query('ul > li',this.domNode).connect('onclick',function(e){
 alert(what.id);
});


With Dojo, you can also provide the current scope "this" by using dojo.hitch
require(["dojo/_base/lang","dojo/query"],
  function(lang,query){
    query('ul > li',this.domNode).on('click',lang.hitch(this,function(e){
       alert(this.id);
      }));
});


Though you can use dojo.hitch in this way to replace the previous methods, one of the best ways to use dojo.hitch is with async xhr callbacks.  dojo.hitch provides an elegant approach when you need to do a callback during an async request.  I use this all the time for populating widgets or in the case of the MVC terminology, controllers.

If you try this.
require(["dojo/_base/xhr"], function(xhr){
  var args = {
    url: "hostnameurl",
    load: this.callback
  };
  xhr.get(args);
});


you will get an error because "this" is not defined within the closure of the xhr request. You could define var what=this provide a handle as we did before. However, dojo.hitch is a better solution.

require(["dojo/_base/xhr","dojo/_base/lang], function(xhr,lang){
  var args = {
    url: "hostnameurl",
    load: lang.hitch(this,callback)
  };
  xhr.get(args);
});

Now, you can get a handle to your current scope "this" and your callback will not bomb.

Comments

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, which e