Dojo onBeforeTransitionIn not firing

Question

I have a problem with transition events in Dojo mobile views (TweetViews). I want to perform an action on view change (like loading content dynamically). So far I have tried the following:

on(document.getElementById("add"),"onBeforeTransitionIn", function(){
    console.log("test");
});

onAfterTransitionIn, onBeforeTransitionOut and onAfterTransitionOut also do not work.

How can I get it to work?

Answer 1

Dojo seperates widgets (like dojox/mobile views) from DOM nodes (like the one you get with document.getElementById()). This means that you cannot use the onBeforeTransitionIn event handler on a plain DOM node, like you're actually trying to do.

Luckily for you widgets adapt their ID from the DOM node, so it should still be "add". To retrieve a widget by its ID, you use:

var myView = registry.byId("add");

The dojo/on module should only be used with DOM events. You might actually make it work with custom widget events, but I don't think it's the correct way of handling these events. Normally you should use the widget on() function, for example:

myView.on("beforeTransitionIn", function() {
    // Do something
});

Also note that you leave out the "on" part in front of the event name. You also do that with the dojo/on module, so it might be interesting to remember this for future use.

I also made a small JSFiddle to demonstrate the event handling, which you can find here: http://jsfiddle.net/g00glen00b/qct3L/.

Answer 2

Since a mobile view is a widget, you should try to register your event on the widget instead of the DOM node. Example:

on(registry.byId("add"), "onBeforeTransitionIn", ...)

registry refers to http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html