piping event handlers in famo.us - famo.us

Question

I want to pipe event handler of view1 to event handler of view2. As a result the following code should trigger eventListeners of both: view1 and view2:
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var ctx = Engine.createContext();
var surf = new Surface({size: [150,150], properties:{background: 'red'}});
ctx.add(surf);
var view1 = new View();
var view2 = new View();
view1.subscribe(surf);
surf.on('click', function() {
view1._eventOutput.emit('A');
});
view2.subscribe(view1);
view1.on('A', function(){
console.log('A1');
})
view2.on('A', function(){
console.log('A2');
})
});
The problem is that I'm receiving only 'A1' event so view2.subscribe(view1) doesn't do the trick..
How to pipe views correctly?

Answer 1

Event pipe and subscribe must go through the View event handlers view._eventOutput or view._eventInput. Similar to what you did when you sent (emit) the custom event to view1.
In the snippet example below, I changed the code to emit the custom event through the surface to show how this can flow.
The surface piped to view1._eventOutput and view1 piped to view2._eventOutput
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var ctx = Engine.createContext();
var surf = new Surface({
size: [150, 150],
properties: {
background: 'red'
}
});
var view1 = new View();
var view2 = new View();
ctx.add(surf);
//view1._eventOutput.subscribe(surf);
//view2._eventOutput.subscribe(view1);
surf.pipe(view1._eventOutput);
view1.pipe(view2._eventOutput);
surf.on('click', function() {
//view1._eventOutput.emit('A');
surf.emit('A');
});
view1.on('A', function() {
console.log('A1');
})
view2.on('A', function() {
console.log('A2');
})
});
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>