Famo.us - 触发事件和管道

Question

假设我有三个视图。 AppView、MenuView 和 StripView。 MenuView 包含多个 StripView，AppView 包含一个 MenuView。如何从 StripView 触发事件并在 AppView 上监听该事件。

编辑

假设我想点击 StripView 上的 ImageSurface 并在 AppView 上重新注册该事件，然后进行一些转换。

我的解决方案

一切都基于 Timbre 应用，在 Famou.us 入门套件参考教程中创建

// StripView.js（在StripView构造函数中调用_setListeners()，在代码中定义bodySurface）

  function _setListeners() {


        var  eventScope =  this._eventOutput;

        this.backgroundSurface.on('click',function(){
           eventScope.emit('test', { somedata:'some value'} );


        }.bind(this));

}

// MenuView.js (_createStripViews() 在 MenuView 构造函数中被调用)

function _createStripViews() {
    this.stripModifiers = [];
    var yOffset = this.options.topOffset;

    for (var i = 0; i < this.options.stripData.length; i++) {
        var stripView = new StripView({
            iconUrl: this.options.stripData[i].iconUrl,
            title: this.options.stripData[i].title
        });
        var stripModifier = new StateModifier({
            transform: Transform.translate(0, yOffset, 0)
        });

        this.stripModifiers.push(stripModifier);

        this.add(stripModifier).add(stripView);

        yOffset += this.options.stripOffset;

        stripView.pipe(this._eventOutput);


    }
}

//AppView.js（代码中定义menuView，AppView构造函数中调用_setListeners()）

  function _setListeners() {

    this.menuView.on('test',function(){
      console.log("IT WORKS");
    }.bind(this));
}

Answer 1

您想使用内置处理程序的视图来实现这一点。它们是 _eventInput 和 _eventOutput.. 这是一个在 StripView 中使用 ImageSurface 并响应 AppView 中的点击的示例..

希望对你有帮助！

// In StripView.js

var imageSurface = new ImageSurface();

imageSurface.on('click',function(){
    this._eventOutput.trigger('image-click', { somedata:'some value'} );
}.bind(this));


// In AppView.js

var stripView  = new StripView();

this.subscribe(stripView);

this._eventInput.on('image-click',function(data){
    // Do Something
});