javascriptdojo

dojo/domReady! and dojo/ready clarification

I've already read the documentation:

https://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html

and also a related question:

Dojo timing issue with dijit/registry and dojo/domReady

Still I'm unsure about the correct approach. Like the other user, I have a (quite long) single page web-application with several views.

All my js requires dojo/domReady! but it isn't enough to guarantee the correct behavior of dijit/registry at loading. This is my configuration:

script(type="text/javascript").
    dojoConfig = {
        has: {
            "dojo-firebug": false,
            "dojo-debug-messages": false,
            isDebug: false
        },
        parseOnLoad: false,
        mblHideAddressBar: true,
        async: true
    };

script(src="/javascripts/dojo/dojo.js")
script(type="text/javascript").
    require([
        "dojox/mobile/parser",
        "dojox/mobile/View",
        "dojox/mobile/Button",
        "dojox/mobile/TextBox",
        "dojox/mobile/RoundRect",
        "dojox/mobile/FilteredListMixin",
        "dojox/mobile/TextArea",
        "dojox/mobile/Switch",
        "dojox/mobile/FormLayout",
        "dojox/mobile/SimpleDialog",
        "dojo/domReady!"
    ], function (parser) {
        parser.parse();
    });

Then, for each view, I have a js function like this template:

#viewLogin(data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true")
...

script(type="text/javascript").
    require([
        "dojo/dom",
        "dojo/on",
        "dojo/request/xhr",
        "dojo/dom-form",
        "dojo/_base/window",
        "dijit/registry",
        "dojox/mobile/parser",
        "dojox/mobile/View",
        "dojox/mobile/compat",
        "dojox/mobile/Button",
        "dojox/mobile/TextBox",
        "dojox/mobile/RoundRect",
        "dojox/mobile/FormLayout",
        "dojox/mobile/SimpleDialog",
        "dojo/domReady!"
    ], function (dom, on, xhr, domForm, win, registry) {
        var txt = registry.byId("txtName").set("value", userName);
        ...

It's enough to wrap into a ready(function(){ }); all the code inside each js script?

Actually the question might be splitted in two:

  1. could it work?
  2. is it the recommended way?
Solution

  • The dojo/ready doc implies dojo/domReady is preferable. Both of these deal with the DOM being ready, meaning the AMD resources are loaded and the browser has prepared the initial DOM. Parsing the DOM, creating widgets and running your code is the next step after domReady.

    Both samples you posted are guarded by dojo/domReady only, so the view code can run before (or while) the parser is still scanning the DOM and creating widget instances. You need some other way to tell the app that things are ready, or change when you try to load the data into the widgets.

    dojo/Parser.parse returns a promise, so you can use that to know when the parsing is complete (see the doc for a caveat) and thus the widgets are created. Then you can either launch the view, or publish a topic to let other objects know things are ready.

    Your requests to get the userName could be done in the startup method of the widget. Though that couples your widget to the data which isn't nice. Some other object could be responsible for getting that data and creating and launching the view.