Geek asks and answers

JQuery Observer Model

I am browsing the Internet for jquery observer pattern implementations.

I wish it were so

observer1.observe(subject);
observer2.observe(subject);

Define some custom observer event callbacks

observer1.bind('customEvent', function(contextData) {
  //Some code
});
observer1.bind('anotherCustomEvent', function(contextData) {
  //Some code  
});
observer2.bind('customEvent', function(contextData) {
  //Some code  
});

The next line then starts the custom callbacks of both observers

subject.trigger('customEvent', contextData);

while the next will fire anotherCustomEvent only for observer1, since observer2 does not have this custom event

subject.trigger('anotherCustomEvent', contextData);

Online guides are more general:

$( document ).on( "topicName" , function () {
  //..perform some behaviour
});

$( document ).trigger( "topicName" );

(Example from http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjquery ) I don’t see how this code can be used to accomplish what I'm looking for.

Or I will have to do it this way (if I save it, as in the above example):

$(document).on("customEvent", function () {
  observer1.trigger("customEvent");
  observer2.trigger("customEvent");
});

$(subject).click(function() { 
  $(document).trigger("customEvent");
});

or a little better:

$(subject).click(function() { 
  observer1.trigger("customEvent");
  observer2.trigger("customEvent");
});

, -- document-customEvent-callback , .

, ?

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript / . , .

+5
3

:

, , , , ,

, , , , , , jQuery. " , ", ", ". :

  • / / ( ).
  • / . , .
  • DOM, DOM.

, HTML:

<div id="div1">div 1</div>
<div id="div2">div 2</div>

'custom'. , , , :

$('div').on('click', function(e) {
    $(this).trigger('custom');
});

document :

$(document).on('custom', function(e) {
    console.log('document is handling custom event triggered by ' + e.target.id);
});

div, / .

document : DOM , , . document DOM, . #div1 , , #div1, , #div2.

, ?

, , - #div1 , #div2, , document ( div). , , , jQuery:

$.fn.observe = function(eventName, callback) {
    return this.each(function(){
        var el = this;
        $(document).on(eventName, function(){
            callback.apply(el, arguments);
        })
    });
}

:

$('#div1').observe('custom', function(e) {
    // do something
});

: http://jsfiddle.net/JwJsP/1

+16

, , :

        $(document).on('customEvent', '.iObserver', function() {
            console.log('i am observer');
        });

        // add observer
        $('ul li#Observer').addClass('iObserver');

        //remove observer
        $('ul li#Observer').removeClass('iObserver');
0

, jQuery, :

//The implementation   
(function($) {

    var o = $({});

    $.each({
        trigger: 'publish',
        on: 'subscribe',
        off: 'unsubscribe'
    }, function(key, val) {
        jQuery[val] = function() {
            o[key].apply(o, arguments);
        };
    });

})(jQuery);


// The way to use it is this:
var somedata = [1, 2, 3, 5, 4, 7, 8];
$.publish('myEvent', somedata); // with data
$.publish('myEvent'); // without data

$.subscribe('myEvent', function(event, data) {
    // handle the event
});
-1

More articles:


All Articles