An extended, natural publish subscribe system for MooTools.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Channels simply relay an object's events to a mediator Events object, allowing other objects to subscribe to the events. This is simply an alternative pattern you may find helpful when organizing your code. It extends upon the traditional "pub/sub" pattern already existent in MooTools.

Without channels

var req = new Request(options),
    el = $('some-id'),
    fx = Fx.Tween(el);

req.addEvent('complete', function(response){
  // this == req
  // lots of objects make it in here
  el.set('text', response);

With Channels

var req = new Request(options)
req.publishes('complete', '/req/complete');

var el = $('some-id');
el.subscribe('/req/complete', function(response){
  this.set('text', response);

var fx = Fx.Tween(el);
fx.subscribe('/req/complete', function(){

Most of the time, when objects need to communicate with each other, you don't care about the object that fires the event, you care about some other object that is managed in the event. Using Channels you can keep the logic pertaining to a particular object all in the same place instead of scattered throughout your application in different event handlers.

This example makes it seem like there's more code when using Channels. In my experience it actually decreases the amount of code in highly interactive sites. See Demos/demo.js for a lengthier demonstration.


Chaining is often helpful, and fully supported in Channels.

var req = new Request(options).publishes('complete', 'req/complete'),
    el = $('some-id').subscribe('/req/complete', function(res){ this.set('text', res); }),
    fx = Fx.Tween(el).subscribe('/req/complete', function(){ this.start() });

Instance Methods

Both methods, publishes and subscribe, take either two args, or an object literal.

el.publishes('mouseenter', 'channel');
  'start': '/some/channel',
  'complete': '/another/channel'

The publishes method can take an array for the second argument (or value in the case of a key:value object literal):

el.publishes('click', ['channel1', 'channel2', 'channel3']);

Channels Methods & Properties

The Channels object has a couple properties and a method:

// implement channels into an existing class
Channels.installTo([Fx, Request]);

// remove a channel completely

// array of current channels being published, helpful for debugging

// array of current subscriptions, helpful for debugging

Works on the Server and the Client

Mediating element events is optional, making this script ideal for both server-side and client-side scripts. You need to include Element.Channels if you want to mediate element events.


Unsubscribe an object from a channel with unsubscribe, but keep other element subscriptions in tact.

MooTools and Publish Subscribe

If you're looking for traditional pub/sub with MooTools, look no further than window, duh.

var semantics {
  subscribe : 'addEvent',
  publish   : 'fireEvent',
  unsubsribe: 'removeEvents'

window.addEvent('some/channel', function(arg){ /* do stuff with `arg` */ });
window.fireEvent('some/channel', arg);