Famo.us - triggering event and piping

Question

Let's say I have three Views. AppView, MenuView and StripView. MenuView contains multiple StripViews and AppView contains one MenuView. How can I trigger event from StripView and listen on that event on AppView.

EDIT

Let's say I want to click on ImageSurface on StripView and reigster that event on AppView, and then do some transitionig.

MY SOLUTION

Everything is based on Timbre app, created in Famou.us Starter Kit Reference Tutorials

// StripView.js (_setListeners() is called in StripView constructor and bodySurface is defined in code)

  function _setListeners() {


        var  eventScope =  this._eventOutput;

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


        }.bind(this));

}

// MenuView.js (_createStripViews() is called in MenuView constructor)

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 is defined in code and _setListeners() is called in AppView constructor)

  function _setListeners() {

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

score 5 · Accepted Answer · answered Jun 17 '14 at 23:23

5

You want to use Views built in handlers to achieve this. These are _eventInput and _eventOutput.. Here is an example using an ImageSurface in StripView and responding to a click in AppView..

Hope it helps!

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

answered Jun 17 '14 at 23:23

johntraver

3,612
18
17

Can I use emit insted of trigger ? – Sysrq147 Jun 18 '14 at 08:01
My stripView is not defined in AppView, multiple stripViews are difined in MenuView, and one MenuView is defined in AppView. I am using some heavy programmed examples to work on. Not sure if I am ready for that level of programming. – Sysrq147 Jun 18 '14 at 08:34
1

I see you figured it out. There are many ways these events can be hooked up. No one way is always right! :) – johntraver Jun 18 '14 at 14:40
I hope I have figured it out. Famo.us is not so easy for unexpirienced programmer but results are awesome. Your answer is right. – Sysrq147 Jun 18 '14 at 14:48
Yes, eventing is a more complicated topic that many programmers have experienced and are familiar with. Just takes time! You'll get there! – johntraver Jun 18 '14 at 14:54

Famo.us - triggering event and piping

1 Answers1