An outlet for my obsession with technology
Poor DOM manipulation in Dojo
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();
No related posts.
| Print article | This entry was posted by Eric Polerecky on August 21, 2008 at 7:39 am, and is filed under ArcGIS, Dojo, ProjectV. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 2 years ago
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
about 2 years ago
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?
about 2 years ago
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)
}
}