$ .event.trigger не запускается в не-DOM-объекте

Question

var test = { }
$(test).on("testEvent", function (){
    console.log("testEvent has fired");
});
$.event.trigger("testEvent");

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

Обратите внимание, что будет несколько объектов, на которые будет подписано событие. Один $ .event.trigger должен запустить все эти события.

Обратите внимание, что этот код работает нормально:

$('#someID').on("testEvent", function () {
console.log('testEvent has fired from DOM element');
})
$.event.trigger("testEvent");

Answer 1

После некоторого исследования кажется, что jQuery 1.7 предоставляет простой способ внедрить механизм публикации / подписки. (найдено здесь ) Для использования механизма публикации / подписки можно использовать следующий код:

(function ($, window, undefined) {
    var topics = {};

    jQuery.Topic = function (id) {
        var callbacks, method, topic = id && topics[id];
        if (!topic) {
            callbacks = jQuery.Callbacks();
            topic = {
                publish: callbacks.fire,
                subscribe: callbacks.add,
                unsubscribe: callbacks.remove
            };
            if (id) {
                topics[id] = topic;
            }
        }
        return topic;
    };
})

Чтобы подписаться на событие, делается следующее:

$.Topic("message").subscribe(function () {
    console.log("a publish has occurred");
});

Для публикации сообщения делается следующее:

$.Topic( "message" ).publish(data);

«Сообщение» - это название события. Аргумент data содержит любую информацию, которую вы хотите передать подписчикам.

Чтобы отменить подписку, вы должны передать функцию, которая была подписана:

$.Topic( "message" ).unsubscribe(funcSubscribedToBefore);

Answer 2

Я недавно использовал подход Бена Алмана, и он отлично работал!

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

(function ($) {

    var o = $({});

    $.subscribe = function () {
        o.on.apply(o, arguments);
    };

    $.unsubscribe = function () {
        o.off.apply(o, arguments);
    };

    $.publish = function () {
        o.trigger.apply(o, arguments);
    };

}(jQuery));

Использование:

$.subscribe('eventName', function (event) {
    console.log(event.value);
});

$.publish({ type: 'eventName', value: 'hello world' });

См. https://gist.github.com/addyosmani/1321768 для получения дополнительной информации.

Answer 3

В современных браузерах (если я прочитал исходный код Underscore.js справа), вы можете изначально привязывать события к не DOM-объектам.В противном случае вам придется использовать что-то вроде функции подчеркивания .bind.Так что это зависит от того, какие браузеры вам нужно поддерживать.

Редактировать:

Ладно, не берите в голову, я думал, что связывание в Underscore.js такое же, как и в Backbone.Backbone имеет свой собственный модуль событий, который выполняет привязку событий, по-видимому.

привязка событий к динамическим объектам в подчеркивании / backbone