Обработка событий в ООП

242

11 февраля 2017, 08:35

Здравствуйте!

Имеется javascript код в ООП "стиле". В объекте this.callbacks содержатся функции, которые необходимо вызвать, когда срабатывают события в объекте eventHandler.

Допустим, пользователь вводит значение в input и должно сработать событие keyup, которое вызывает функцию getMatches.

Проблема в том, что функция Plugin вызывается только один раз при загрузке страницы и ничего не возвращает, вследствие этого, в дальнейшем, события (keyup, focus) не срабатывают.

Необходимо каким-то образом внедрить этот код в страницу, чтобы он обрабатывался (вызывался) всегда, как в функциональном стиле.

Код JS:

$(document).ready(function () {
    Plugin(); //Вызывается 1 раз, при загрузке документа
});
var Plugin = function () {
var self = this;
this.callbacks = {
    findCities: {
        City: function (id, city) {
            //Do something...
        },
        getMatches: function (input) {
            //Do something...
        }
    },
    eventHandler: {
        keyup: function () {
            $('example-div').keyup(function (e) { // не срабатывает
                self.callbacks.findCities.getMatches(this);
            })
        },
        focus: function () {
            $('example-div').focus(function (e) { // не срабатывает
                var city = new self.callbacks.findCities.City(0, 'Moscow');
            });
        }
    }
};

Я мог бы написать этот код в обычном функциональном "стиле".

Что-то вроде этого (и это будет работать):

$(document).ready(function () {
    $('example-div').keyup(function (e) { 
        getMatches(this);
    });
    $('example-div').focus(function (e) {
        var city = new City(0, 'Moscow');
    });
});
function City(id, city) {
    //Do something...
}
function getMatches(input) {
    //Do something...
}

Answer 1

Как-то так(но непонятно, при чём тут ООП):

$(document).ready(function () {
    Plugin(); //Вызывается 1 раз, при загрузке документа
});
function Plugin() {
    var callbacks = {
        findCities: {
            City: function (id, city) {
                //Do something...
            },
            getMatches: function (input) {
                //Do something...
            }
        }
    };
    $('example-div').keyup(function (e) { // не срабатывает
        callbacks.findCities.getMatches(this);
    });
    $('example-div').focus(function (e) { // не срабатывает
        var city = new callbacks.findCities.City(0, 'Moscow');
    });
};