I am learning Dojo by following the tutorials @ the Dojo official website. You can find all the tutorials @ the Dojo Documentation page.
In the first tutorial, it guides you to load the Dojo library from the CDN and add write your custom module. Normally, the module code should be placed relative to the dojo.js directory. But if we load the dojo.js from CDN, where should we put the our own code?
In that case, we have to configure the Dojo settings before we load the dojo.js. Here is an example.
1. Create the following files under your webroot folder.
- <webroot>/dojo-tutorial-1/index.html
- <webroot>/dojo-tutorial-1/eureka/myModule.js
<webroot>/dojo-tutorial-1/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- Configure Dojo first -->
<script>
dojoConfig = {
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
},
// Don't attempt to parse the page for widgets
parseOnLoad: false,
packages: [
// Any references to a "eureka" resource should load modules locally, *not* from CDN
{
name: "eureka",
location: "/dojo-tutorial-1/eureka" // Needs a preceding "/"
}
],
// Timeout after 10 seconds
waitSeconds: 10,
aliases: [
// Instead of having to type "dojo/domReady!", we just want "ready!" instead
["ready", "dojo/domReady"]
],
// Get "fresh" resources
cacheBust: true
};
</script>
<!-- Load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
data-dojo-config="async: true">
</script>
<!-- Run the code below when dom is ready -->
<script>
// Require the module we created
require(["eureka/myModule", "ready!"], function(myModule) {
// Set new text
myModule.updateText("greeting", "Hello Dojo!");
// Restore text to original
setTimeout(function() { myModule.restoreText("greeting"); }, 3000);
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
<webroot>/dojo-tutorial-1/eureka/myModule.js
// Create a custom module that returns an object with a few methods
define(["dojo/dom"], function(dom) {
// Store the original text before changing it
var originalText = "";
var node;
// Return the module's return value
return {
updateText: function(id, message) {
node = dom.byId(id);
originalText = node.innerHTML;
node.innerHTML = message;
},
restoreText: function(id) {
node.innerHTML = originalText;
}
};
});
The above demo which substitute the h1 Hello with Hello Dojo! and then restore it after 3 seconds. If you still have problem when trying this demo, open the Chrome console and you should be able to find the errors.
Done =)
Reference:
Eureka! 
Lots of topic to write about Javascript-related things.
1) Debugging is always a challenging task in Javascript because of its dynamic type nature.
2) The most popular topic would now be HTML5. How could it work with DOJO seamlessly?
Just 2 suggestions for your next topic.
LikeLike
1) Debugging is always a challenging task in Javascript because of its dynamic type nature.
The Chrome/Firebug console could help a lot when debugging javascript. These are the tools i always use. =P
2) The most popular topic would now be HTML5. How could it work with DOJO seamlessly?
Haven’t tried that before. but there are some posts about DOJO and HTM5 when searching in Google. Seems it is quite promising.
LikeLike