Обработка событий с помощью jQuery, AMD и require.js

Я очень новичок в AMD и require.js и уже почти день борюсь с небольшой проблемой. Я пробовал разные способы, но не уверен, что это правильный путь/правильный подход. Буду признателен за отзыв от всех гуру JavaScript.

Я пытаюсь реализовать обработчик событий для текстового поля, которое будет прослушивать любые входные данные/изменения. В обработчике событий я хотел бы обновить маркер, отображаемый в данный момент на карте. Итак, я определил два модуля — открытый для openlayers и один, содержащий мой собственный код для отображения карты, обновления маркеров и т. д.

Пользовательский модуль выглядит следующим образом:

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
    };
});

Проблема в том, что когда обработчик событий вызывается в результате ввода в текстовое поле, переменная openstreetmaps в функции, определенной как обработчик для метода «on», равна undefined.

Единственный способ обойти это - изменить эту строку на что-то вроде этого:

  require(['openstreetmaps'], function(openstreetmaps) { openstreetmaps.clearMarkersAndShowAddress(newAddress);});

Кроме того, если я использую такую ​​конструкцию, как мне управлять переменными и передавать данные между всеми этими замыканиями? Похоже, что внутреннее замыкание не может получить доступ к переменным из внешних замыканий или функций.

Я был бы очень признателен за вашу помощь и отзывы.


person MojoJojo    schedule 17.06.2014    source источник


Ответы (1)


Переменные из других ваших модулей доступны из обработчика событий, вам просто нужно изменить параметр функции define openStreetMaps на openstreetmaps. Вот почему дополнительный вызов require работает; вам просто нужно сопоставить имя переменной с требуемым модулем.

Для управления переменными просто выставляйте все общедоступное, возвращая их из модуля, и эти общедоступные переменные могут получить доступ ко всему, что определено в модуле, который создает замыкание. И каждый модуль регистрируется только один раз, поэтому вы можете сохранить любое состояние в каждом модуле.

person Herman Tran    schedule 17.06.2014