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(在MenuView构造函数中调用_createStripViews())

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在代码中定义,_setListeners()在AppView构造函数中调用)

  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
});