Page 1 of 1
dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 19:47
by BrianLovesMarvel
Looking for advice on pass by value using dojo.connect and this.connect. I'm pretty sure there are some experts out there
Code: Select all
// during a loop, spot takes the values of A5,A6,A7,A8,B4,...,I2,I3,I4
dojo.connect( $("hex_landing_" + spot), "onclick", (e) => { this.onLandInVolcano(spot); });
I do get the connection made on each of the divs (e.g. hex_landing_A7) but when I click and get to the event handler (onLandInVolcano), the value of spot is always I4 (the last value of spot in the loop). It seems to be passing a reference to the spot variable rather than the value of spot at the time the connection is made. I want to use the spot value "A7" rather than a reference to the spot variable within the anonymous function.
What is the proper way to use variable values when creating dojo.connect linkages?
Thanks, Brian
Re: dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 20:14
by Tisaac
The issue is not with dojo but with js scope, you should probably learn about that a bit more
Also we will need more code if you want us to help more.
Re: dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 20:31
by BrianLovesMarvel
Scoping and dereferencing inside anonymous functions passed to dojo is exactly my question. In C, I'd use var, *var or &var as needed. From what I've read, Javascript is always pass by value, except objects are always pass by reference. But advice on composing anonymous functions for dojo is not easily found. Hoping for a good example and clear explanation for a confused old guy.
Code: Select all
// Connect all landing spots to send onLandInVolcano ajax call
landing_spots = gamedatas.landing_spots;
spots = landing_spots.split(','); // A5,A6,A7,A8,B4,...,I2,I3,I4
for( var i = 0; i < spots.length; i++ ) {
spot = spots[i];
//dojo.connect( $("hex_landing_" + spot), "onclick", () => 'onLandInVolcano(spot)'); // function location unknown
//dojo.connect( $("hex_landing_" + spot), "onclick", () => 'this.onLandInVolcano(spot)'); // function location unknown
//dojo.connect( $("hex_landing_" + spot), "onclick", (e) => { onLandInVolcano(spot); }); // onLandInVolcano is not defined
//dojo.connect( $("hex_landing_" + spot), "onclick", 'onLandInVolcano' ); // no_stack_avail
//this.connect( $("hex_landing_" + spot), "onclick", (e) => { console.log(spot); } ); // always I4
dojo.connect( $("hex_landing_" + spot), "onclick", (e) => { this.onLandInVolcano(spot); });
/*
this.connect( $("hex_landing_" + spot), "onclick", (e) => {
console.log('onLandInVolcano');
console.log('id of div = ' + e.path[0].id);
console.log(e);
} );
*/
}
Re: dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 22:09
by Tisaac
But this is not specific to dojo, that was my point ! Any callback even in vanilla js will raise the same kind of trouble so you should definitively learn about that.
Search for closure, arrow function, forEach, ...
Short answer : use foreach
Re: dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 23:04
by BrianLovesMarvel
Thanks very much, closures what the keyword/concept what the old guy needed to know.
https://developer.mozilla.org/en-US/doc ... t/Closures
I have yet to test this but it seems like:
Code: Select all
spots.forEach(function(spot) {
dojo.connect( $("hex_landing_" + spot), "onclick", (e) => { this.onLandInVolcano(spot); });
});
would limit the reach of spot to the value of the closure of the function, and
Code: Select all
for( var i = 0; i < spots.length; i++ ) {
let spot = spots[i];
dojo.connect( $("hex_landing_" + spot), "onclick", (e) => { this.onLandInVolcano(spot); });
}
should do a similar thing. Using "let" (rather than the default "var") would limit the scope of spot to a local loop variable in the closure.
Is that the idea?
Usually when first learning something new, I look for a good example (an idiom, style, or common practice) and use that. There are often examples of well-thought-through idioms available that balance things like clarity, brevity, data organization, and performance. A wise student copies the master even before learning the reasons why.
Cheers, Brian
Re: dojo.connect, passing values to event handlers?
Posted: 28 January 2021, 23:10
by Tisaac
Second solution is fine, but for the first solution you will need an arrow function (as the argument of the forEach) if you want the "this" to refer to the proper scope.
That being said, both approaches are perfectly fine, I usually tends to use forEach but that's a matter of taste.
Re: dojo.connect, passing values to event handlers?
Posted: 29 January 2021, 01:02
by BrianLovesMarvel
Much appreciated! I will read more on arrow functions.
Re: dojo.connect, passing values to event handlers?
Posted: 29 January 2021, 19:31
by BrianLovesMarvel
Looks like the doc on "this" is here. Pretty dense reading, but it explains how arrow functions treat "this" versus named functions.
https://developer.mozilla.org/en-US/doc ... ators/this
Still reading up on this.