piping event handlers in 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?

score 1 · Accepted Answer · answered Mar 12 '15 at 01:54

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>

piping event handlers in famo.us

1 Answers1