Javascript 如何向每个具有特定效果的曲面添加单击事件，无法添加修改器

如何将单击事件添加到具有特定效果的每个曲面，我无法添加修改器

我尝试了下面的代码，但它不工作。我无法向每个曲面添加StateModifier。 请帮我尽快解决这个问题

var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var context = Engine.createContext();
var myModifier = new StateModifier({
    Transform: Transform.translate(0, 100, 1)
});
var surfaces1 = [];
var scrollers = [];
var scroll_h1_cont = new ContainerSurface({
    size: [window.innerWidth, 100],
    properties: {
        overflow: 'hidden'
    }
});
var scroll_h1 = new Scrollview({
    direction: 0
});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
scrollers.push(scroll_h1_cont);
for (var i = 0; i < 9; i++) {
    var surface1 = new Surface({
        content: "Surface: " + (i + 1),
        size: [window.innerWidth / 3, 100],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
            lineHeight: "100px",
            textAlign: "center"
        }
    });
    surface1.pipe(scroll_h1);
    surfaces1.push(surface1);
    surface1.pipe(myModifier);
};
context.add(scroll_h1_cont);

var-Engine=require（“著名/核心/引擎”）；
var表面=要求（“著名/核心/表面”）；
var视图=要求（“著名/核心/视图”）；
var Scrollview=require（“著名的/views/Scrollview”）；
var ContainerSurface=要求（“著名/表面/容器表面”）；
var Transform=require（‘著名/核心/转换’）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var context=Engine.createContext（）；
var myModifier=新状态修饰符({
Transform:Transform.translate（0,100,1）
});
var surfaces1=[]；
var scrollers=[]；
var scroll_h1_cont=新集装箱表面({
大小：[window.innerWidth，100]，
特性：{
溢出：“隐藏”
}
});
var scroll_h1=新的滚动视图({
方向：0
});
滚动_h1.sequenceFrom（表面1）；
滚动上一页继续添加（滚动上一页）；
滚动条。按下（滚动条）；
对于（变量i=0；i<9；i++）{
var surface1=新曲面({
内容：“表面：”+（i+1），
尺寸：[window.innerWidth/3100]，
特性：{
背景颜色：“hsl（“+（i*360/8）+”，100%，50%）”，
线宽：“100px”，
textAlign：“居中”
}
});
表面1.管道（卷轴_h1）；
表面1.推动（表面1）；
表面1.管道（myModifier）；
};
添加（滚动\u h1\u cont）；

---

有什么建议吗？

这至少可以让您的scrollview正常工作

/* globals define */
define(function(require, exports, module) {
    'use strict';
    var Engine     = require('famous/core/Engine');
    var Surface    = require('famous/core/Surface');
    var Scrollview = require('famous/views/Scrollview');

    var context = Engine.createContext();

    var surfaces = [];

    // create ScrollView
    var scrollview = new Scrollview({
        direction: 0
    });

    // create 100 surfaces and add them into array
    for (var i = 0; i < 9; i++) {
        var temp = new Surface({
            content: 'Surface: ' + (i + 1),
            size: [undefined, 100],
            properties: {
                backgroundColor: 'hsl(' + (i * 360 / 40) + ', 100%, 50%)',
                lineHeight: '100px',
                textAlign: 'center'
            }
        });

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

    // add array of surfaces into ScrollView
    scrollview.sequenceFrom(surfaces);

    // add ScrollView into context
    context.add(scrollview);
});

/*全局定义*/
定义（功能（需求、导出、模块）{
"严格使用",；
var Engine=require（“著名/核心/引擎”）；
var表面=要求（“著名/核心/表面”）；
var Scrollview=require（'名人/views/Scrollview'）；
var context=Engine.createContext（）；
var曲面=[]；
//创建滚动视图
var scrollview=新的scrollview({
方向：0
});
//创建100个曲面并将它们添加到阵列中
对于（变量i=0；i<9；i++）{
var temp=新曲面({
内容：“表面：”+（i+1），
大小：[未定义，100]，
特性：{
背景颜色：“hsl（+（i*360/40）+”，100%，50%），
线宽：“100px”，
textAlign:“中心”
}
});
温度管道（滚动视图）；
表面。推压（温度）；
}
//将曲面数组添加到ScrollView中
scrollview.sequenceFrom（表面）；
//将ScrollView添加到上下文中
添加（滚动视图）；
});

Thnx@Kraig Walker，请告诉我如何向每个曲面添加修改器？每个曲面的修改器值不同，还是适用于所有曲面的修改器？所有曲面的修改器值相同，但操作将适用于单击的曲面。经过多次尝试后，我向每个曲面添加了修改器和单击事件，但单击第一个曲面即曲面[0]出现错误：[Uncaught TypeError:无法读取未定义的属性'setTransform'，请帮助我解决此错误。您需要遵循良好做法@Amit和post code。纯粹的推测无法帮助人们