javascript - 从 ScrollContainer 传递事件

Question

我试图通过封装在 View 中的 ScrollContainer 来传输鼠标点击，但不知何故没有发生任何事情。我刚刚开始玩 Famo.us，所以也许我在这里遗漏了一些明显的东西。我可以直接从 ScrollContainer 中包含的表面进行管道传输，但我不确定这是否是这样做的方法。有什么想法吗？

链接到可运行的 jsFiddle 演示:

http://jsfiddle.net/nqxz596f/

以及代码本身:

define('main', function (require, exports, module) {
    var Engine          = require('famous/core/Engine');
    var Surface         = require('famous/core/Surface');
    var Transform       = require('famous/core/Transform');
    var View            = require('famous/core/View');
    var Scrollview      = require('famous/views/ScrollContainer');

    var context = Engine.createContext();
    var mainview = new View({
        size: [500, 500]
    });
    var scrollview = new Scrollview({
        scrollview: {direction:0, size: [undefined, 300]}
    });
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });

        surface.pipe(scrollview);
        surfaces.push(surface);
    }
    
    mainview._eventInput.on('click', function(){
        console.log('click');
    });
    
    scrollview.pipe(mainview);
    mainview.add(scrollview);

    context.add(mainview);
});

Answer 1

在撰写本文时，ScrollContainer 没有自己的事件处理程序。它使用 event handlers from the ScrollView that it contains (scrollcontainer.scrollview)。 ScrollContainer 有一个 ContainerSurface，它订阅 scrollcontainer.scrollview 的事件，并且是隐藏 ScrollView 溢出的 DOM 元素。

The below code in a new jsFiddle显示设置 ContainerSurface 的正确方法。您不需要 mainview 来管理您的事件。

您有几个选择:

• 将表面事件通过管道传输到 ScrollView 事件输出(如下所示)并在 ScrollView 上监听事件
• 或通过管道将表面事件传送到容器 surface.pipe(scrollcontainer.container); 并监听来自容器的事件 scrollcontainer.container.on('click', .. .

更正的代码:

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var View = require('famous/core/View');
    var ScrollContainer = require('famous/views/ScrollContainer');
    var Scrollview = require('famous/views/Scrollview');
    var Utility = require('famous/utilities/Utility');

    var context = Engine.createContext();

    var scrollcontainer = new ScrollContainer({

        scrollview: {
            direction: Utility.Direction.Y
        }
    });
    scrollcontainer.container.setSize([500, 500]);

    var surfaces = [];

    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
            content: "Surface: " + (i + 1),
            size: [undefined, 200],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            }
        });

        surface.pipe(scrollcontainer.scrollview._eventOutput);
        surfaces.push(surface);
    }

    scrollcontainer.scrollview.on('click', function (e) {
        console.log('click ' + e.target.innerText);
    });

    scrollcontainer.sequenceFrom(surfaces);

    context.add(scrollcontainer);
});

替代选项:

    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
            content: "Surface: " + (i + 1),
            size: [undefined, 200],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            }
        });

        surface.pipe(scrollcontainer.container);
        surfaces.push(surface);
    }

    scrollcontainer.container.on('click', function (e) {
        console.log('click ' + e.target.innerText);
    });

<强> jsFiddle to show event pipe to a View

for (var i = 0; i < 40; i++) {
    var surface = new Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, 200],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            lineHeight: "200px",
            textAlign: "center"
        }
    });

    surface.pipe(scrollcontainer.container);
    surfaces.push(surface);
}

var mainview = new View({size: [500, 500]});

mainview.on('click', function (e) {
    console.log('click ' + e.target.innerText);
});

scrollcontainer.sequenceFrom(surfaces);

scrollcontainer.container.pipe(mainview._eventOutput);

context.add(scrollcontainer).add(mainview);