Как прикрепить список событий к объекту в JS

Question

Это кажется возможным, поскольку парни из http://www.knockoutjs.com, кажется, делают это.Я не смог разобраться в их кодовой базе, чтобы заставить работать подобный шаблон.

Фактически у меня есть приложение в стиле MVVM с пользовательским интерфейсом, основанным на вкладках jQuery.Каждая вкладка представлена ​​моделью представления, которую я хочу иметь возможность проверять и запускать события на основе изменений в модели.

Я создаю представление моих данных, подобное следующему при загрузке страницы:

$(document).ready(function(){
  thisTab = new ThisTab();
});

function ThisTab(){
  Load: {Load from my model}
  Save: {Save/Persist model to the db (via web service call)}
  Validate: {
    this.Item1 = function(){Validate item 1, do work, refresh fields, whatever.}
  }
}

Сама модель представляет собой сложный глобальный объект, и изменения в DOM (входные данные и т. Д.) Немедленно обновляют объект.Изменения некоторых из этих свойств должны вызывать связанные с ними элементы проверки thisTab.Validate.Item1.У меня нет проблем с повышением событий от изменений.Если я связываю прослушиватель событий со случайным элементом DOM, я могу без проблем вызывать свои подпрограммы, и все работает прекрасно.Однако кажется странным прикреплять событие к несвязанному объекту DOM.

Поэтому вопрос заключается в следующем: как я могу сделать что-то вроде thisTab.addEventListner("someEvent") или $(thisTab).bind("someEvent"), где thisTab не является DOMэлемент, но вместо этого является родным объектом.Пытаясь это сделать, я всегда получаю сообщение об ошибке «этот метод не поддерживается».

Answer 1

Свяжите событие с обычным объектом JS, как если бы это было для объекта DOM.

$(thisTab).bind("someEvent", function() {
    // handler's code here
});

См. пример . Использование этого имеет один побочный эффект: jQuery добавит служебный идентификатор в качестве свойства объекта - это выглядит примерно так: jQuery1510587397349299863.

Это свойство с именем jQuery<timestamp> добавляется ко всем объектам DOM, с которыми связаны события или данные, а обычные объекты ведут себя аналогично. Если вас не устраивает изменение объектов модели, используйте собственный механизм обратного вызова, который довольно легко добавить.

Answer 2

Прикрепление события к стандартному объекту не использует те же методы;По сути, вы бы реализовали свое собственное событие следующим образом:

function ThisTab()
{
    listeners: [],
    addListener: function(callback) { this.listeners.push(callback); },
    load: { // Finds DOM elements and such, and attaches to their events. The callback from the DOM event should be a method on your object },
    yourDomEventCallback: function() 
    { 
        for(var j = 0; j < this.listeners.length; j++)
            this.listeners[j]();
    }
}

Приведенный выше код следует использовать в качестве отправной точки, так как я только собрал его вместе и, вероятно, есть синтаксические ошибки.По сути, вы взяли свой объект и сопоставили его с событиями, которые хотите захватить, а затем выставили методы для присоединения методов обратного вызова, которые вы будете вызывать при возникновении скрытых событий DOM.Вы не сможете использовать абстракции jQuery для событий DOM, потому что такие события не имеют значения для вашего пользовательского объекта.