dojo - dojo tutorial Dojo AMD - coding dojo - dojo examples
In the next example, let's use Dojo features and understand what AMD ( Asynchronous Module Definition) means.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>The difference from previous example is that, there is an extra script tag and within that, there are few dojo featues being used.
Let's see each one of them require In layman term, require is similar to import or using statements in other languages where you import some OOTB libraries (in dojo you call them modules). Existing modules are loaded using the keyword 'require' and new modules are created using the keyword 'define'. We will learn more about modules in the later section. For this example, we have used two OOTB modules 'dojo/dom' and 'dojo/dom-construct'. dojo/dom (dom) is the core DOM (document object model) which can be used to get a node from html. For javascript developers, it is similar to document.getElementById('') in-fact, internally dojo uses the same method. dojo/dom-construct(domConstruct) is used to create nodes like div, li, ul etc. It's DOM construction API and it can also be used to insert a node into DOM at any position. Let's say, you have a div 'abc' and want to create another div 'xyz' and place it after 'abc'. You can accomplish that like
domConstruct.create("div", { id:"xyz",innerHTML: "<p>new DIV</p>" });
domConstruct.place(dojo.byId("xyz"), dojo.byId("abc"), "after");Example:
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});within function, you see dom and domConstruct. This is how we reffer to dojo/dom and dojo/dom-construct. You can use whatever the naming convention you want like
But it's a good practice to you have meaningful names like for dojo/dom use dom and for dojo/dom-construct, user domConstruct.
Now within the function, we have
var greetingNode = hi.byId('greeting');What this does is that it searches the a dom (div in this case) with id='greeting'. variable greetingNode, will have the actual dom node. Then we have
domConstruct.place('<em> Dojo!</em>', greetingNode);So here, we are appending Dojo! to the node greetingNode. This is like Hello+Dojo! and the output will be Hello Dojo!
- So with this, we learned
- How to use dojo features
- How to use OOTB modules
- How to manipulate dom