I am very new to AMD and require.js and have been struggling with a little problem for almost over a day. I've tried different ways but not sure what is the correct way/right approach. I would appreciate some feedback from all the JavaScript gurus.
I am trying to implement an event handler for a text box that will listen for any input/changes. In the event handler, I would like to update a marker currently being shown on a map. So, I defined two modules - open for openlayers and one containing my custom code for displaying the map, updating markers etc.
The custom module looks like below:
define('mymodule', [ 'open-layers', 'jquery', 'openstreetmaps','t5/core/console' ], function(
openLayers, $,openStreetMaps ,console) {
var init = function() {
}
var listenForChange = function(clientId) {
clientId = clientId;
var textBox = $(document.getElementById(clientId));
console.debug(textBox);
$('#addressLineTwo').on('change paste keypress input', function() {
console.debug(textBox);
console.debug('OnChange');
console.debug($(this));
console.debug($(textBox).val());
openstreetmaps.clearMarkersAndShowAddress();
});
}
return {
init: init,
listenForChange: listenForChange
};
});
The problem is, when the event handler gets called as a result of input in the text field, the openstreetmaps variable in function defined as handler for "on" method is undefined.
They only way I could get around this was to change that line to something like this:
require(['openstreetmaps'], function(openstreetmaps) { openstreetmaps.clearMarkersAndShowAddress(newAddress);});
Also, if I use such a construct how do I manage variables and passing data between all those closures? It seems like that the inner closure cannot access variables from the outer closures or functions.
I would really appreciate your help and feedback.