Poor DOM manipulation in Dojo
August 21st, 2008
In jQuery DOM manipulation is incredibly easy:
$("#dealer-toggle").toggle();
One would assume the same can be accomplished in dojo via:
dojo.query('node').toggle();
but you would be DAMN WRONG!
dojo.query will work fine but hide/show/toggle have been moved to the dojo.fx and renamed fadeOut for .hide() and wipeIn for .show()…what about toggle? no sir. There is no dojo function to toggle nods. You have to write your own.
ESRI
For anyone using the ESRI JavaScript Library for ArcGIS Server (a JavaScript Lib based on Dojo): ESRI created their own namespace in the API.
The ESRI namespace consists of 7 methods. I bet you can guess 3 of them.
hide
show
and of course
toggle
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jsapi/namespace_esri.htm
Wish
- Dojo “fixes” their query interface by using common function names. even if they are alias.
- Dojo adds toggle to the functions that can be acted on node lists (a node list if what is returned from dojo.query)
- The ESRI namespace used the same constructors as Dojo. ie: hide should be dojo.query(‘node’).hide();
So the dojo.query function actually does not return a NodeList, it returns an array of Nodes. This array has a bunch of additional methods. For example, you can chain it up and do dojo.query(’node’).forEach(esri.toggle);
cheers
Thanks…but what projects that don’t use dojo via the JavaScript API..
Any chance of getting a non-minified/shrinksafe version of the esri namespace?
The code for those 3 functions is pretty much:
show = function(node) {
node.style.display = “block”;
}
hide = function(node) {
node.style.display = “none”;
}
toggle = function(node) {
if (node.style.display === “none”) {
show(node);
}
else {
hide(node)
}
}