I have found that you cannot chain connects with consistent behavior. In the code below, the onCustomClick method in the widget is called, but the function that is connected to it does not get called. The workaround I have, is what I have done with onCustomClick2 where I attach the event to an internal method that simply calls the other method. Is there a way to write this code without having to have the internal method?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dojo Connect Issue</title>
</head>
<body>
<div id="content"></div>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require(["dojo/domReady!", "dojo/parser", "dijit/_Widget", "dijit/_Templated"], function(dr, p, w, t) {
dojo.declare("W1", [w, t], {
templateString: '<div>Click Me</div>',
postCreate: function() {
this.inherited(arguments);
this.connect(this.domNode, 'onclick', this.onCustomClick);
this.connect(this.domNode, 'onclick', this._onCustomClick2);
},
onCustomClick: function() {
console.debug('onCustomClick');
},
_onCustomClick2: function() {
this.onCustomClick2();
},
onCustomClick2: function() {
console.debug('onCustomClick2');
},
});
var w = new W1({}, dojo.byId('content'));
dojo.connect(w, 'onCustomClick', function() {
console.debug('End Consumer - onCustomClick'); // never gets called???
});
dojo.connect(w, 'onCustomClick2', function() {
console.debug('End Consumer - onCustomClick2');
});
w.startup();
});
</script>
</body>
</html>
dojo.connect works by redefining the method with a new function which calls the old one (and the method you’re binding to) So based on the order of execution here, postCreate binds to one definition of the onCustomClick method, then the dojo.connect binds to another. Try using the connect signature that would do a lazy lookup of the onCustomClick method: (edited with Craig’s correction)
dojo.connect(this.domNode, 'onclick', this, 'onCustomClick');