Question

I made code like this, to easier connecting callbacks on events:

dojo.ready(function() {
    for(var action in page.actions) {
        for(var key in page.actions[action]) {
            (function() {
                dojo.query(key).connect(action, function(evt) {
                    if(page.actions[action][key]() == false) 
                        dojo.stopEvent(evt); 
                });
            })();
        }
    }
});

page = {
    actions : 
    {
        onclick : 
        {
            "#page-action-one" : function()
            {
                alert("Action 1");
                return false;
            },
            "#page-action-two" : function()
            {
                alert("Action 2");
                return false;
            }
        }
    }
};

But click on “#page-action-one” an “#page-action-two” make the same alert(“Action 2”). I tried to use cloer, but without effect. I now, I can make it different way, but I would like to now, why is this happening.

Answer 1

You’re trying to fix the closure issue by wrapping your event handler assignment in an anonymous function. But the key to that trick is that you have to pass in the looping variable (or variables) as an argument to the anonymous function – otherwise the anonymous function wrapper does nothing. Try:

dojo.ready(function() {
    for(var action in page.actions) {
        for(var key in page.actions[action]) {
            (function(action, key) {
                dojo.query(key).connect(action, function(evt) {
                    if(page.actions[action][key]() == false) 
                        dojo.stopEvent(evt); 
                });
            })(action, key);
        }
    }
});

This “fixes” the value of action and key at the time the anonymous function is called, so within the anonymous function those variable names only apply to the passed arguments, not to the named variables in the outer scope, which will update on the next loop iteration.