How to define dojo module for reference by onClick in HTML? - dojo

Question

I'm trying to follow the latest Dojo1.9 best AMD practices when defining a separate javascript module to be referenced by the JSP markup. I used to have a large javascript section in the same JSP file, MyJayEsspEe.jsp, where the javascript section defined functions that were called by various element onClick properties. Now I am separating the javascript into a new file called MyCallbacks.js using the Dojo define mechanism.
The format of the MyCallbacks.js looks like:
define(["dojo/dom", "dojo/dom-style", "dojo/has", "dijit/registry", "dojo/on"],
function (dom, domStyle, dojoHas, registry, on) {
...
function clickedOnButton1() {
console.log("Clicked on button1");
}
function clickedOnLinkTwo() {
console.log("Clicked on second link");
}
...
return {
clickedOnButton1: clickedOnButton1,
clickedOnLinkTwo: clickedOnLinkTwo
}
});
and in the MyJayEsspEe.jsp file I currently have working ugly markup that includes:
...
<button data-dojo-type="dijit/form/Button" type="button" onclick="require(['commonjs/MyCallbacks'], function(mycallbacks) {mycallbacks.clickedOnButton1();});">First Button</button>
<a id="testLinkId" href="#" onclick="require(['commonjs/MyCallbacks'], function(mycallbacks) {mycallbacks.clickedOnLinkTwo();});">Link Two</a>
...
but I'm hoping there's a way to define the module and require it such that in the markup I could have cleaner callbacks like so:
...
<button data-dojo-type="dijit/form/Button" type="button" onclick="mycallbacks.clickedOnButton1();">First Button</button>
<a id="testLinkId" href="#" onclick="mycallbacks.clickedOnLinkTwo();">Link Two</a>
...
I've been reviewing the Dojo reference documentation for defining modules and callbacks but so far haven't found a pointer to the clean solution that I'm looking for. Is there a cleaner solution than the one I've been using?
Thanks for your time,
Gregor

Answer 1

If you cannot create a full widget on the JS side and use the template to attach events,
using your current example you can write it like that:
<button data-dojo-type="dijit/form/Button" type="button" onclick="require('commonjs/MyCallbacks').clickedOnButton1();">First Button</button>
<a id="testLinkId" href="#" onclick="require('commonjs/MyCallbacks').clickedOnLinkTwo();">Link Two</a>
Your JS look a bit strange through, in how you return your functions. Usually it would be written like that:
define(["dojo/dom", "dojo/dom-style", "dojo/has", "dijit/registry", "dojo/on"],
function (dom, domStyle, dojoHas, registry, on) {
var MyCallbacks={};
MyCallbacks.clickedOnButton1 = function() {
console.log("Clicked on button1");
};
MyCallbacks.clickedOnLinkTwo = function() {
console.log("Clicked on second link");
};
...
return MyCallbacks;
});

Answer 2

As a best practice it is always advised to encapsulate the behaviour of a widget in itself. All callbacks that a widget is supposed to handle should be defined within the widget. Defining all the callbacks in a single module breaks the modularity and portability of your modules.
To answer your question:
<script>
require(['dojo/dom', 'dojo/on', 'commonjs/MyCallbacks'], function(dom, on, MyCallbacks) {
// register all event handlers here
on(dom.byId('testLinkId'), 'click', MyCallbacks.clickedOnLinkTwo);
});
</script>
<a id="testLinkId" href="#">Link Two</a>