Question

我们说我有三个观点。 AppView，MenuView和StripView。 MenuView包含多个StripView，AppView包含一个MenuView。如何从StripView触发事件并在AppView上侦听该事件。

修改

让我们说我想点击StripView上的ImageSurface并在AppView上重新启动该事件，然后进行一些过渡。

我的解决方案

一切都基于Timbre app，在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
});

Famo.us - 触发事件和管道

1 个答案: