[英]Pub/Sub scope in jQuery
I am attempting to implement a Pub/Sub pattern in jQuery with the following code : 我试图使用以下代码在jQuery中实现Pub / Sub模式:
$.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. 我有一个活动对象,应用于每个
$('.activity_radio')
div元素。 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. 当我点击任何
$('.activity_radio')
div内的单选按钮时, $.subscribe
事件将根据页面上的activity_radio
div数量触发(X)次数。
How do I publish/subscribe events based only within a particular div ?? 如何仅在特定div中发布/订阅事件?
Code 码
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
});
}
}
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 );
});
}
}
});
$(function(){
// foreach DOM element with the class of activity_radio
$('.activity_radio').each(function(){
// trigger the init func in activity object
activity.init(this);
});
});
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 你可以在$ 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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.