1

I have been going over the examples and demos of Famo.us, in particular the menus. In the examples such as taasky, timbre etc. the side menu is made up of MenuItemViews. Each MenuItemView comprises of a background, icon and title - each one a surface.

In order to make each menu item 'clickable' do I have to add an .click to each of the 3 surfaces that make up the MenuItemView and emit an event handler?

Or is there an easier way to make each menu item 'clickable'?

Thanks for your help in advance :)

Pandafinity
  • 713
  • 2
  • 7
  • 19

1 Answers1

2

Yes, what you want to do is pipe your surface events to the Views _eventOutput handler. This way the click event only needs to be defined on the view itself.

In this example there are two surfaces that each pipe all events to _eventOutput of view. When we click either surface, the views click event is triggered

Hope this helps!

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');

var context = Engine.createContext();

var view = new View();

var surface1 = new Surface({
    size:[400,400],
    properties:{
        backgroundColor:'green'
    }
});

surface1.pipe(view._eventOutput);

view.add(surface1);

var surface2 = new Surface({
    size:[200,200],
    properties:{
        backgroundColor:'red'
    }
});

surface2.pipe(view._eventOutput);

view.add(surface2);

view.on('click',function(evt){
    console.log("View Clicked!");
})

context.add(view);
johntraver
  • 3,612
  • 18
  • 17
  • Sorry for late reply. I tried what you have suggested - and while it works to a certain extent, if I were to use this for the "MenuItemView" examples then when I click on the menu items I get the same onClick return - which is the value of the last menu item in the menu - so while it works I do not think it differentiates between which is clicked. – Pandafinity Jul 18 '14 at 09:31
  • What you are describing is a javascript implementation problem and can be solved using function binding.. So your click handler would look more like this.. view.on('click',function(evt){console.log(this)}.bind(view)) .. where 'this' in the function will be the view clicked.. – johntraver Jul 18 '14 at 15:49