Configuring Dojo With dojoConfig

dojoConfig is an object for storing the global configurations used across a page or an application in DOJO. Before dojo components are loaded by the page, dojoConfig has to be configured to pass the global parameters. It is known as djConfig till the version 1.6. djConfig is deprecated and renamed as dojoConfig from the version 1.7 and djConfig will have backward compatibility till the next version 2.0. This configuration object has to be loaded before we are calling the dojo.js loader. Otherwise, important global configurations will not be assigned to internal objects which will be used across the pages.

It is important to understand that dojoConfig and dojo/_base/config are different. dojoConfig is a simple object stores the array of arrays with key value pairs. Whereas dojo/_base/config is used for reading the dojoConfig values and assigned to the suitable varaibles at the time of bootstrap process.

• How to setup dojo application?
• How to create tooltip in DOJO?

In simple terms, the dojoConfig values are accessed by application using the dojo/_base/config class. This config object can not be changed once loaded. This configurations are unique per instance. It means that a single application could load multiple instances of DOJO. Each instance would have its own set of configurations (Reference) .

There are three ways to configure the dojoConfig for your application.

1. data-dojo-config attribute

This is the simplest way for configuring the dojoConfig. When you import the dojo.js using the script tag, add another attribute data-dojo-config and append
all the paramteres with coma seperated delimeter.This is not suitable if the configurations are very huge.

   <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/dojo/1.9/dojo/dojo.js"
    data-dojo-config="parseOnLoad: true, isDebug: true"></script>

2. Explicitly creating dojoConfig object

This option is most widely used by the developers. Here dojoConfig is just delclared as an object with list of configuration parameters. One important point on using this option is to declare this object before dojo core (dojo.js) is not imported. Otherwise the configuration parameters will not be effected.

<script type="text/javascript">
       var dojoConfig = {
            parseOnLoad: true,
            isDebug: true,
        };
</script>

I have provided only the basic configuration parameters here. I will explain the use of each paramters in the future sections.

3. dojoConfig object into the build via the scopeDjConfig parameter

This is very rarely used approach for passing the parameters. When you run the dojo build, the dojoConfig parameters has to be passed using the attribute scopeDjConfig. You need not worry on this approach, the above two approaches are good practice in DOJO.

4. dojoConfig Attributes

1. has

One of the greatest feature introduced in version 1.7 is the “has” pattern for detecting the feature. By passing the value true or false, it disable or enable the functionality.

<script>
 dojoConfig = {
has: {
"dojo-amd-factory-scan": false
}
 };
</script>

2. baseUrl

This is the base url of DOJO application It will be appended to module identifier when looking for the full path.

baseUrl: "/js"

3. Packages

It is an array of objects which provides package names and location of that package.

packages: [{
    name: "myapp",
    location: "/js/myapp"
}]

4. map

It allows mapping of different paths.

map: {
    dijit16: {
        dojo: "dojo16"
    }
}

5. async

This value tells the loader if the dojo has to be loaded asynchronously. The valid values are true, false or legacyAsync.

async: true

6. parseOnLoad

If you set true for this attribute, scripts are parsed at the time loading the page. Otherwise, you have to intiate the parse operation by invoking the dojo.parse() method. Best practice is to avoid set the value to true, always invoke it mannualy.

7. deps

An array of resource paths which should load immediately once Dojo has loaded.

There are many other attributes defined in the object. Look at below sample code to understand how to use dojoConfig.

<script>
 dojoConfig = {
 has: {
 "dojo-firebug": true,
 "dojo-debug-messages": true
 },
 parseOnLoad: false,
 packages: [
{
 name: "test",
 location: "/documentation/tutorials/1.9/dojo_config/test"
 }
 ],
waitSeconds: 10,
 map: {
"*": {
 ready: "dojo/domReady"
 }
 },
cacheBust: true
 };
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

<script>
 require(["demo/TestDialog", "dojo/parser", "ready!"], function(TestDialog, parser) {
parser.parse();

});
</script>

Recommended Books:

• Learning DOJO
• JavaScript Pocket Reference
• Head First jquery