Famo.us 菜单 - 点击 - 还有其他方法吗？答案

【问题标题】：Famo.us Menu - Click - Is there another way?Famo.us 菜单 - 点击 - 还有其他方法吗？
【发布时间】：2014-07-09 23:58:57
【问题描述】：

我一直在浏览 Famo.us 的示例和演示，尤其是菜单。在 taasky、音色等示例中，侧边菜单由 MenuItemViews 组成。每个 MenuItemView 都包含一个背景、图标和标题 - 每一个都是一个表面。

为了使每个菜单项“可点击”，我是否必须向组成 MenuItemView 的 3 个表面中的每一个添加一个 .click 并发出事件处理程序？

或者有没有更简单的方法让每个菜单项“可点击”？

提前感谢您的帮助:)

【问题讨论】：

标签： menu famo.us

【解决方案1】：

是的，您要做的是将您的表面事件通过管道传送到 Views _eventOutput 处理程序。这样点击事件只需要在视图本身上定义即可。

在此示例中，有两个表面，每个表面将所有事件通过管道传输到视图的 _eventOutput。当我们点击任一表面时，都会触发视图点击事件

希望这会有所帮助！

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

【讨论】：

抱歉回复晚了。我尝试了您的建议 - 虽然它在一定程度上有效，但如果我将其用于“MenuItemView”示例，那么当我单击菜单项时，我会得到相同的 onClick 返回 - 这是最后一个的值菜单中的菜单项 - 所以当它工作时，我认为它不会区分点击哪个。
您所描述的是一个javascript实现问题，可以使用函数绑定来解决。所以您的点击处理程序看起来更像这样.. view.on('click',function(evt){ console.log(this)}.bind(view)) .. 函数中的“this”将是点击的视图..