Pub/Sub scope in jQuery

Question

I am attempting to implement a Pub/Sub pattern in jQuery with the following code :

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

This works fine until I attempt to build something with multiple instances.

I have an activity object that is applied to each $('.activity_radio') div element. When I click on a radio button inside any $('.activity_radio') div the $.subscribe event will trigger (X) amount of times based on the number of activity_radio divs on are on the page.

How do I publish/subscribe events based only within a particular div?

Code

Radio Activity ( radio-activity.js )

var activity = {
 init : function ( element ) {

// get our boilerplate code
this.activity = new util.factories.activity();
this.element = element;
this.$element = $(element);
// other init code

// gather our radio elements
this.target_element = this.$elem.find('input[type=radio]');

// send our radio elements to onSelect       
this.activity.onSelect(this.target_element);

// trigger click function that will subscribe us to onSelect publish events
this.click() 

},
// subscribe to events
click : function()
{
   $.subscribe('activity.input.select', function ( event, data ){
      // we have access to the value the user has clicked 
      console.log(data);
      // trigger another function  // do something else 
   });
}
}

Base Activity Boilerplate Code ( activity-factory.js )

var activity_factory = factory.extend({
   init: function(e)
   {
     // init code
   },
   onSelect : function ( inputs ) {
   
    inputs.on('click', function(){

        // do some processing               
               
        // retrieve the value 
        var data = $(this).val();
              
        // announce that the event has occured;
       $.publish( 'activity.input.select', data );

                
     });
   }
}
});

Triggered when DOM is ready

$(function(){
       
       // foreach DOM element with the class of activity_radio
       $('.activity_radio').each(function(){
            // trigger the init func in activity object
            activity.init(this);
       });
       
    
   });

score 2 · Accepted Answer · answered Aug 09 '13 at 08:41

You can write your subscribe/publish as a plugins

$.each({
   trigger  : 'publish',
   on       : 'subscribe',
   off      : 'unsubscribe'
}, function ( key, val) {
    jQuery.fn[val] = function() {
        this[key].apply(this, Array.prototype.slice.call(arguments));
    };
});

And you will be able to call it on $element

this.$element.subscribe('activity.input.select', function(event, data) {

and

onSelect: function ( inputs ) {
    var self = this;

    inputs.on('click', function(){

        // do some processing               

        // retrieve the value 
        var data = $(this).val();

        // announce that the event has occured;
       self.$element.publish('activity.input.select', data);


    });
}

Great answer, works perfectly. Would I be correct in assuming that `jQuery.fn[val]` is a jQuery reference to prototype ? — bart_88, Aug 12 '13 at 00:02
@bart_88 yes it's a prototype of jquery.fn.init which is the constructor for the jquery object (if you call jQuery it create new jQuery.fn.init) — jcubic, Aug 12 '13 at 05:54

Pub/Sub scope in jQuery

Radio Activity ( radio-activity.js )

Base Activity Boilerplate Code ( activity-factory.js )

Triggered when DOM is ready

1 Answers1

Linked