- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
dojo.forEach
Submitted by shaneosullivan on Sun, 08/12/2007 - 14:25.
JavaScript 1.6 has a forEach loop, where you can apply a certain function to each element of an array. Unfortunately at the time of this writing, only Firefox 2 has support for JS 1.6. But never fear! Dojo has defined one you can use in any Dojo-supported browser.
Foreach is syntactic sugar for a regular ol' for loop. So for example:
for(var i in queueEntries){
console.debug(queueEntries[i]);
}
console.debug(queueEntries[i]);
}
Can be written as:
dojo.forEach(queueEntries,
function(oneEntry, index, array) {
console.debug(oneEntry + " at index " + index);
}
);
function(oneEntry, index, array) {
console.debug(oneEntry + " at index " + index);
}
);
Like dojo.connect, we use an anonymous function here to define the operation. This function must accept between one and three arguments. The first argument is the value of each value in the array in turn, the second is the current index or position in the array, and the third argument is the array itself.
For this simple loop, forEach isn't anything exciting. But combined with other Dojo functions, especially dojo.query(), it becomes remarkably useful. Consider this snippet, which disables all SELECT tags on the page:
dojo.forEach(
dojo.query("select", document),
function(selectTag) {
selectTag.disabled = true;
}
);
dojo.query("select", document),
function(selectTag) {
selectTag.disabled = true;
}
);
How cool is that? (Answer: very!) There's no monkeying around with DOM functions, no using tedious names or id's, and it continues to work even when you add new SELECT tags.
Running dojo.forEach on a dojo.query result is so common, that Dojo defines a shortcut. This snippet:
dojo.query("select", document).forEach(
function(selectTag) {
selectTag.disabled = true;
}
);
function(selectTag) {
selectTag.disabled = true;
}
);
does the same thing. But that's not all! New in 1.0 you can collapse the function down to its body, passed in as a string like so:
// 1.0 only.
dojo.query("select", document).forEach("item.disabled = true;");
dojo.query("select", document).forEach("item.disabled = true;");
Ay carumba! That's a lot of functionality in a tiny 1-line package. Once you get used to the syntax, you'll never want to go back.
There's more on dojo.query in Selecting DOM Nodes with dojo.query
- Printer-friendly version
- Login or register to post comments
- Subscribe post
How do you reference parent object variables?
See code snippet below. Can I reference this.myVariable from within the forEach's anonymous function?
dojo.declare("foo.bar.MyWidget",
[ dijit._Widget, dijit._Templated ],
{
myVariable: "hello world",
....
myFunction: function (stuff) {
dojo.forEach (stuff,
function (item) {
// Can I reference this.myVariable here? If so, how?
});
},
....
});
--Joshua
In the future, please post
Array.forEach conflict Microsoft AJAX Library
I use the dojo toolkit within DotNetNuke, which adopted the MS AJAX library earlier this year. In one of my dojo implementations a conflict occurs with the Arrary.forEach method, The MS AJAX library has a defined "Array" object with a "forEach" method, Array.forEach(). Because of this the dojo usage of the Javascript 1.6 Array.forEach is overridden by this MS method.
Therefore, I am forced to ALWAYS use the dojo alternative to the dojo JS 1.6 Array.forEach call.
Did Microsoft, in its AJAX library implementation, actually turn a blind eye to this method in the JS 1.6 standard? It wouldn't surprise me.