jQuery中的Pub / Sub范围

我试图使用以下代码在jQuery中实现Pub / Sub模式：

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

这工作正常，直到我尝试构建具有多个实例的东西。

我有一个活动对象，应用于每个$('.activity_radio') div元素。 当我点击任何$('.activity_radio') div内的单选按钮时， $.subscribe事件将根据页面上的activity_radio div数量触发（X）次数。

如何仅在特定div中发布/订阅事件？

码

无线电活动（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 }); } } 

基本活动锅炉代码（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 ); }); } } }); 

DOM准备就绪时触发

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

Answer 1

您可以将订阅/发布编写为插件

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

你可以在$ element上调用它

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

和

 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); }); }