How to define a module and use it in dojo with AMD?

Question

I support and expand the old project that was before AMD. I want to add a chart to the application. for this i 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 saved this file as /customModules/singleChart.js

In my main HTML page, I added it to the packages as follows:

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

The function I want to call it from is pre-AMD. Therefore, I call it as follows:

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

I see that /customModules/singleChart.js loading into the Firebug console, as well as into the Net Tab. However, there is no customModules.singleChart object. Oddly enough, there are no errors. I tested this in Firebug, as well as in the Google Chrome developer tools.

What is the correct way to invoke 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 with dojo / _ base / define, and the first argument to your definition function is the identifier of the module in dotted notation, for example:

 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 creating it using the “new” keyword.

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

If you want a static function instead, 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; }); 

Then you can use it as follows:

 customModules.singleChart.showDailyChart(data); 

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

Answer 2

I'm not sure, but I think you need to create an object with the showDailyChart property. Maybe something like this:

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

Usually you should be able to use your module now by contacting:

 require(["myPackage/myModule"], function(myModule) { myModule.showDailyChart(myData); }); 

Or with outdated code (remind that this will disappear in version 2.0).

 dojo.require("myPackage.myModule"); myPackage.myModule.showDailyChart(myData); 

Answer 3

The dojo/_base/loader module is the one responsible for handling dojo.require calls in Dojo 1.7+. When you load an AMD module using the deprecated dojo.require method, if the has config-publishRequireResult is true (it is the default), then the object returned by the AMD module will be automatically determined using the name of the object specified in the dojo.require call until the object no longer exists. From Dojo 1.9 loader.js:669-672 :

 var result = doRequire(moduleName, omitModuleCheck); if(has("config-publishRequireResult") && !lang.exists(moduleName) && result!==undefined){ lang.setObject(moduleName, result); } 

If this does not work because one of these conditions is incorrect, you can manually set the object using dojo/_base/lang.setObject yourself. Using the three-argument version of dojo/_base/declare , proposed by Philippe, simply calls dojo/_base/declare a setObject call.