famous scrollview events

main.js

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

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    var onOver = function(data) {
        data.target.innerHTML = "over";
    };

    var onClick = function(data) {
        data.target.innerHTML = "click";
    };

    var onOut = function(data) {
        data.target.innerHTML = "out";
    };

    for (var i = 0, temp; i < 10; i++) {

        view = new View({size: [undefined, 200]});

        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });
        temp.pipe(view);
        temp.pipe(scrollview);
        view.add(temp);

        view._eventInput.on("mouseover", onOver);
        view._eventInput.on("click", onClick);
        view._eventInput.on("mouseout", onOut);

        view.pipe(scrollview);
        surfaces.push(view);
    }

    mainContext.add(scrollview);
});

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

var mainContext = Engine.createContext();

var scrollview = new Scrollview();
var surfaces = [];

scrollview.sequenceFrom(surfaces);

var onOver = function(data) {
    data.target.innerHTML = "over";
};

var onClick = function(data) {
    data.target.innerHTML = "click";
};

var onOut = function(data) {
    data.target.innerHTML = "out";
};

for (var i = 0, temp; i < 10; i++) {

    view = new View({size: [undefined, 200]});

    temp = new Surface({
         content: "Surface: " + (i + 1),
         size: [undefined, 200],
         properties: {
             backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
             lineHeight: "200px",
             textAlign: "center"
         }
    });
    temp.pipe(view);
    view.add(temp);

    temp = new Surface({
         content: "Surface: " + (i + 1),
         size: [undefined, 200],
         properties: {
             backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
             lineHeight: "200px",
             textAlign: "center"
         }
    });
    temp.pipe(view);
    view.add(temp);

    view._eventInput.on("mouseover", onOver);
    view._eventInput.on("click", onClick);
    view._eventInput.on("mouseout", onOut);

    view.pipe(scrollview);
    surfaces.push(view);
}

mainContext.add(scrollview);

});