使用jQuery，AMD和require.js进行事件处理

Question

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.

Answer 1

The variables from your other modules are accessible from within the event handler, you just need to change the define function parameter of openStreetMaps to openstreetmaps . That's why the extra require call works; you just need to match up the variable naming with your required module.

For managing variables, just expose everything public by returning them from the module, and those public variables can access whatever is defined in the module which creates a closure. And each module only gets registered once so you can retain whatever state you want in each module.