Difference between id and data-dojo-id

Question

What is the difference between an id and a data-dojo-id in a dojo tag such as this:

<button id="save" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-event="onClick:save">Save</button>

I try to reference this button to change it's label with: var myButton = dijit.byId("save"); so that I can change the button label myButton.set("label", "Add New");

If I use id="save" it works. If I only use data-dojo-id="save" it doesn't work.

I'm fairly new to Dojo so an explanation or tutorial you can point me to would be much appreciated!

Answer 1

data-dojo-id assigns widget into global namespace, i.e. into window object:

<button data-dojo-id="save" data-dojo-type="dijit/form/Button">Save</button>​

so you can access the button directly:

save.set("label", "Add New");

See the difference in action at jsFiddle: http://jsfiddle.net/phusick/7yV56/

EDIT: To answer your questions. I do not use data-dojo-id at all. It pollutes global namespace which is the direct opposite of what the AMD does. Anyway, you can still use something like widgets.save and widgets.rename to minimize the pollution:

<button data-dojo-id="widgets.save" data-dojo-type="dijit/form/Button">Save</button>​
<button data-dojo-id="widgets.rename" data-dojo-type="dijit/form/Button">Rename</button>​

IMO, data-dojo-id is there for progressive enhancement, not for fully-fledged applications.

data-dojo-id just assigns an instance to a variable, so with multiple dijits with the same data-dojo-id the variable will point to the last one assigned (i.e. it'll not be an array).

You can avoid extensive use of registry.byId writing your method to obtain widgets according to your needs. The best way to start is dijit/registy.findWidgets(rootNode, skipNode). Please also note, that dojo/parser.parse(rootNode, options) returns an array of instantiated objects, or more precisely:

Returns a blended object that is an array of the instantiated objects, but also can include a promise that is resolved with the instantiated objects. This is done for backwards compatibility. If the parser auto-requires modules, it will always behave in a promise fashion and parser.parse().then(function(instances){...}) should be used.

An example of a method I use to assign ContentPane's dijits into its widgets property, which is an object:

_attachTemplateWidgets: function(widgets) {
    widgets = widgets || this.getChildren();
    for(var each = 0; each < widgets.length; each++) {
        var widget = widgets[each];
        var attachPoint = widget.params.dojoAttachPoint;
        if(attachPoint) {
            this.widget[attachPoint] = widget;
        }

        var children = widget.getChildren();
        if(children.length > 0) {
           this._attachTemplateWidgets(children);
        }
    }
}

I put the entire class here: https://gist.github.com/3754324. I use this app.ui._Pane instead of dijit/layout/ContentPane.