famo.us 中的管道事件处理程序

Question

我想将 view1 的事件处理程序通过管道传递给 view2 的事件处理程序。因此，以下代码应触发两者的事件监听器：view1 和 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');
    })
});

问题是我只收到 'A1' 事件，所以 view2.subscribe(view1) 没用..

如何正确地管理视图？

Answer 1

事件管道和订阅必须通过 View 事件处理程序 view._eventOutput 或 view._eventInput。与您将自定义事件发送 (emit) 到 view1 时所做的类似。

在下面的代码片段示例中，我更改了代码以通过表面发出自定义事件以展示其流动方式。

表面通过管道传输到 view1._eventOutput，视图 1 通过管道传输到 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>

famo.us 中的管道事件处理程序

piping event handlers in famo.us

famo.us