dojo.connect, passing values to event handlers?

[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

[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.

[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); 
	} );
	*/
}

[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

[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

[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.

[BrianLovesMarvel]

Much appreciated! I will read more on arrow functions.

[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.