[jQuery] Publish & subscribe / event pooling
I've been noodling around on how to create a pubsub system that doesn't depend on linking objects and events together. Based on previous post it turns out to be straight forward with bind and trigger (see code below).<div>
</div><div>However, two things I can't figure out.</div><div>I can't figure out why namespaced events don't work with this. The event's never fire...or at lest the 'bound' objects never receive them.</div>
<div>
</div><div>The other thing is related to 'live'? Shouldn't this work with 'live' as well? </div><div>
</div><div><div><span class="Apple-tab-span" style="white-space:pre"> </span><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><meta http-equiv="content-type" content="text/html; charset=UTF-8"></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><title>Conforming XHTML 1.0 Strict Template</title></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><script src="pubsub3_files/jquery.js"></script></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><script type="text/javascript"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$(function()</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//bind an object to an event. </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//When event is triggered, the function is called with e being the event object</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>//<span class="Apple-tab-span" style="white-space:pre"> </span>and e.type the name of the event, and e.target the html element, </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//<span class="Apple-tab-span" style="white-space:pre"> </span>which should be the same as 'this' scope</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>// ? Can't figure out how to use 'live' instead of 'bind'</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>// ? Namespaced events ('event.namspace') don't seem to work </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$('#div1').bind('customAjaxStart', function(e, data){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>console.log('event.target: '+e.target+ ', event.type: '+ e.type + ', data: '+ data);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).slideUp('slow');</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$('#div2').bind('customAjaxStart', function(e, data){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>console.log('event.type: '+ e.type + ', data: '+ data);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).slideUp('slow');</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$('#test').click( function(){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//easily remove a listener with 'unbind'</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> $('#div1').unbind('customAjaxStart');</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> //triggering events via the $.event scope.</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> //pass in any data.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> $.event.trigger('customAjaxStart',{user:'something'}); //anything goes with an object</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> $.event.trigger('customAjaxStart',['something2']); //simple data doesn't work unless wrapped in [ ]. </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></script></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></head><div FirebugVersion="1.4.3" style="display: none;" id="_firebugConsole"></div><body></div><div>
<span class="Apple-tab-span" style="white-space:pre"> </span><input id="test" value="trigger ajax start" type="button"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div id="div1">DIV 1</div></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><div id="div2">DIV 2</div></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></body></html></div></div>