How to work with the input and output handers in famo.us? - famo.us

Question

In order to build clean code, Famo.us is using events to communicate to modules. Most of the Event guide shows example about EventHandler. Now we are supposed to build robust view with input and output events, how to actually work with it ? i.e. what is the purpose of the input and output handlers ?

Answer 1

In order to build robust modules is is convenient to separate the code into Widgets which are only responsible for the function they are built for. Here is the official way of building a widget:
function Widget(){
this.eventOutput = new EventHandler();
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
}
var widget = new Widget();
To summarise the function above it does create an object with 2 EventHandler, one for the input and another one for the output.
Their purpose is trivial:
all the incoming events i.e. the events triggered from outside of the widget object will be triggered to the eventInput handler.
all the outgoing events i.e. events generated by the widget to the outside are triggered through the eventOutput.
To understand a little better, you will very likely be listening to an eventInput handler from inside of the widget and trigger to an eventOutput handler still from inside of the widget code.
Here is an example:
function Widget(){
// here we are inside the Widget code scope
var self = this; // just to keep the root "this" somewhere
this.eventOutput = new EventHandler();
this.eventInput = new EventHandler();
this.eventInput.on("sayHello", function()
{
alert("Hello")
});
function didSomething()
{
self.eventOutput.trigger("didSomething");
}
}
You might then use the widget as follow:
var widget = new Widget();
widget.eventOutput.on("didSomething", function(){alert("The widget did something!")})
widget.eventInput.trigger("sayHello"); // will alert "Hello" from inside the widget
Now we might not be willing to know the internal structure of a widget to use it. Here we are calling and listening on the eventOutput and eventInput which might actually have any name. For the clarity of the code, we can bind those events functions to the widget itself adding the following lines into the widget:
... code ...
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
... code ...
Now the widget can be listened and triggered in the following way:
widget.on("didSomething", function(){alert("The widget did something!")});
widget.trigger("sayHello"); // will let the widget alert "Hello"
What about piping ?
This is quite simple, while piping a widgetA to a widgetB
widgetA.pipe(widgetB);
All the events triggered by widgetA.eventOutput are piped (read triggered) to widgetB.eventInput
Note: The same principle can be applied on subscription, the following will achieve exactly the same result:
widgetB.subscribe(widgetA);