CODEWITHSUNDEEP
javascriptdojo
thebjorn
thebjorn

Reputation: 27321

How does package location work in Dojo?

I'm working through the example at http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/demo/module.html and I've created a directory structure as follows

w:/djt2/index.html
w:/djt2/js/mymodule.js  (exact copy of http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/demo/myModule.js)

I then set the Tinyweb web-server to serve localhost from w:/djt2

I've changed index.html a tiny bit, to adjust for putting mymodule.js inside the js subdirectory (I've removed comments too below):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>

    <script>
        var dojoConfig = {
            async: true,
            packages: [{
                name: "djt2",
                location: '/js'     /* Location #1 */
            }]
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
    require(["djt2/mymodule"], function(myModule){   /* Location #2 */
        myModule.setText("greeting", "Hello Dojo!");
        setTimeout(function(){
            myModule.restoreText("greeting");
        }, 3000);
    });
</script>
</body>
</html>

This works, but I'm not entirely sure I understand why... In particular, at Location #1, the original had location.pathname.replace(/\/[^/]+$/, '') which evaluates to the empty string and makes the loader look for mymodule.js at the CDN location (I also tried to set location to "/", but that made it search at http://mymodule.js/).

At Location #2 it is a little mystical that the prefix should be djt2/...

If someone could explain it, or direct me to the documentation (I'm a bit overwhelmed with learning a new framework :-).

Upvotes: 1

Views: 3517

Answers (1)

Craig Swing
Craig Swing

Reputation: 8162

Add an extra djt2 directory in your structure

w:/djt2/js/djt2/mymodule.js

Set the baseUrl in the configuration. 

var dojoConfig = {
    async: true,
    baseUrl: '/js'
    packages: [{
         name: "djt2",
         location: 'djt2'
    }]
};

Setting the baseUrl will tell dojo where to look for custom modules. The location that is part of the package is relative to the baseUrl.

I always think of modules/packages as namesapces. To extend your example with an additional package, it would look like the following:

w:/djt2/js/another/anotherModule.js

var dojoConfig = {
    async: true,
    baseUrl: '/js'
    packages: [{
         name: "djt2",
         location: 'djt2'
    }, {
         name: "another",
         location: 'another'
    }]
};

Upvotes: 4

Related Questions