How to define Module and use it in dojo with AMD?

Question

I am maintaining and extending an old project which was pre-AMD. I wish to add an Chart to the application. for this, I have created a js file as follows:

define(["dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"],
    function (Chart) {

    function showDailyChart(data){
       //code to show the chart in a dialog
     }
    return customModules.singleChart;
});

I have saved this file as /customModules/singleChart.js

In My main HTML Page, I have added it to the packages as follows:

var dojoConfig = { parseOnLoad: true,
        packages: [....,{"name":"customModules",
             "location":location.pathname.replace(/\/[^/]+$/, "")+"/modules" }
                         ]};

The function from which I want to call it, is pre-AMD. So I am calling it as follows:

dojo.require("customModules.singleChart");
.
.
.
customModules.singleChart.showDailyChart(data);

I can see that /customModules/singleChart.js is loaded in the Firebug console as well as Net Tab. However there is no customModules.singleChart object. Strangely enough there is no error either. I have tested this in Firebug, as well as Google Chrome's developer tools.

What is the correct way to call an AMD Module using dojo.require? Or is there a better way to do what I need?

Answer 1

To use your widget with pre-AMD code, you need to declare your module using dojo/_base/define, and have the first argument of your define function be the module ID in dot notation, like this :

define(["dojo/_base/declare","dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"], function (declare, Chart){
    return declare("customModules.singleChart", null, {
        showDailyChart: function(data){
           //code to show the chart in a dialog
         }
    });
});

The second argument to the declare function is the class or list of classes you inherit from, or null in this case.

You can then use this widget by instantiating it with the "new" keyword.

var foo = new customModules.singleChart();
foo.showDailyChart(data);
...

If instead you want a static function, you can do it like this :

define(["dojo/_base/declare","dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"], function (declare, Chart){
    var widget = declare("customModules.singleChart", null, {
    });

    widget.showDailyChart = function(data){
       //code to show the chart in a dialog
    }

    return widget;
});

You can then use it like this :

customModules.singleChart.showDailyChart(data);

More details here : http://dojotoolkit.org/reference-guide/1.9/dojo/_base/declare.html#signature