Question

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

问题在于我只收到了＆＃39; A1＆＃39;事件所以view2.subscribe（view1）没有做到这一点..

如何正确管道视图？

Answer 1

事件管道和订阅必须通过View事件处理程序view._eventOutput或view._eventInput。与您向emit发送（view1）自定义事件时的操作类似。

在下面的代码段示例中，我更改了代码以通过曲面发出自定义事件，以显示它是如何流动的。

表面通过管道传送到view1._eventOutput并且view1通过管道传送到view2._eventOutput

＆＃13;

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']);

＆＃13;

<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>

＆＃13;

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

1 个答案: