Dojo.query and dijits

I had some js code that used HTML5 style data attributes to auto bind a custom js object and a group of input controls

E.g. html code

<input type="text" data-field="firstname" /> etc

js code

var nodeList = dojo.query("input[data-field]");
nodeList.forEach(function(node) {
    try {
      node.value = dataObject.getProp(node.attributes["data-field"].value);
    } catch (error){
      console.log(error);
    }
});

The dataObject.getProp method returns a value for a given name.

So that's the situation and it all works fine. Now, I have conver开发者_运维技巧ted the input controls to dijit.form.TextBoxs and the code no longer works

The problems are:

1. The HTML5 data attribute has been removed when the html was parsed (there is a work around that involves wrapping each control in a span tag and adding the HTML5 data attribute, it's a bit inconvenient but will do in the interim).

2. How can I combine my dojo.query syntax as above and have an array of dijits returned so I can iterate through and set the textbox's value.

---

Attributes on a declarative Dojo dijit class (in HTML) that do not map to one of the dijit class's properties will be removed from the resulting DOM node.

This behavior is because there is no guarantee that a simple "div" may not map to an entire tree of nodes for some dijit's. The DOM node with the declaration may not be the DOM node that eventually becomes the dijit's domNode property.

What you're trying to do, use a CSS class style instead. This is very common as the "class" attribute is used in HTML to distinguish among similar markup's. Usually when you try to operate on a subset of similar dijit's, you'll want different display styling for them as well.

Example:

<div dojoType="dijit.form.TextBox" class="firstname" />

dojo.query(".firstname").forEach(...);

---

I solved this by:

dojo.query( '.any_given_class' ).forEach(function(widget_node){ 
    widget = dijit.byNode(widget_node); //this will give the widget object, using the DOM node
});

This way, by using the node reference I can get the widget with all the dijit's methods and properties. This could be a solution, because by doing this you can get the widget:

widget = dijit.byNode(dojo.byId('any_id'));

---

In Dojo 1.7.3, dijit.byNode() seems not work well.

I get the widget like this:

var widget = registry.getEnclosingWidget(widget_node);