dojo.connect / dojo.hitch scope problem?

Question

I have a programmer class that populates a ul with project names and checkboxes - when a checkbox is clicked a popup dialog is supposed to show with the programmers id and the project name. dojo.connect is supposed to setup onclick for each li but the project (i) defaults to the last value (windows). Any ideas why this is happening?

...
projects: {"redial", "cms", "android", "windows"},
name: "Chris",
id: "2",

constructor: function(programmer) {
    this.name = programmer.name;
    this.id = programmer.id;
    this.projects = programmer.projects;
},

update: function(theid, project) {
    alert(theid + ", " + project);
},

postCreate: function() {
    this.render();

    // add in the name of the programmer
    this.programmerName.innerHTML = this.name;

    for(var i in this.projects) {
        node = document.createElement("li");
        this.programmerProjects.appendChild(node);
        innerNode = document.createElement("label");
        innerNode.setAttribute("for", this.id + "_" + i);
        innerNode.innerHTML = i;
        node.appendChild(innerNode);
        tickNode = document.createElement("input");
        tickNode.setAttribute("type", "checkbox");
        tickNode.setAttribute("id", this.id + "_" + i);
        if(this.projects[i] == 1) {
            tickNode.setAttribute("checked", "checked");
        }

        dojo.connect(tickNode, 'onclick', dojo.hitch(this, function() {  
            this.update(this.id, i)
        }));
        node.appendChild(tickNode);
    }   
},

Answer 1

Just found out that extra parameters can be attached to the hitch:

dojo.connect(tickNode, 'onclick', dojo.hitch(this, function() {  
            this.update(this.id, i)
}));

should be:

dojo.connect(tickNode, 'onclick', dojo.hitch(this, "update", this.id, i));

Answer 2

Why are you calling this.render()? Is that your function or the widget base (i.e. already in the lifecycle)? For good measure make sure to call this.inherited(arguments); in postCreate.

My guess would be that tickNode is not in the DOM yet for the connect to work. Try appending the checkbox before you setup the connect. The last one is being fired because it is being held on by reference. You can try something like this instead:

for(var i = 0; i < this.projects.length; i++) {
    var p = this.projects[i];
    node = document.createElement("li");
    this.programmerProjects.appendChild(node);
    innerNode = document.createElement("label");
    innerNode.setAttribute("for", this.id + "_" + p);
    innerNode.innerHTML = p;
    node.appendChild(innerNode);
    tickNode = document.createElement("input");
    tickNode.setAttribute("type", "checkbox");
    tickNode.setAttribute("id", this.id + "_" + p);
    if(i == 0) { //first item checked?
        tickNode.setAttribute("checked", "checked");
    }

    node.appendChild(tickNode);

    dojo.connect(tickNode, 'onclick', function(e) {
        dojo.stopEvent(e);
        this.update(this.id, p);
    });
}

I would consider looking into dojo.create as well instead of createElement as well. Good luck!

Answer 3

Alternatively, and I think it's cleaner, you can pass the context into dojo.connect as the third parameter:

dojo.connect(tickNode, 'onclick', this, function() {  
  this.update(this.id, i);
});