Question

我在Famo.us和JavaScript中真的很新。基于Timbre示例我试图在PageView上实现GridLayout。这很好。现在我计划在每个ImageSurface上做一个点击事件。但那不是那样的。这是我的代码：

for(var i = 0; i < this.options.imageData.length; i++) {

        this.imageSurfaces.push(new ImageSurface({
            content: this.options.imageData[i].imgUrl,
            size: [200, 200],
            properties: {
               // backgroundImage: this.options.imageData[i].imgUrl,
                color: "black",
                textAlign: 'center'
            }
        }));
        //console.log(i);

        this.imageSurfaces[ii].on('click', function (){
            console.log("Test Click - " + ii + " - " + i);
            console.log(this.imageSurfaces[ii]);
        }.bind(this));

Answer 1

我错过了定义ii的位置。

但是，如果将表面存储在临时var中，您就可以使用它来连接处理程序（以及执行其他操作）：

var aSurface, i;
//
for(i = 0; i < this.options.imageData.length; i++) {
      aSurface = new ImageSurface({
           content: this.options.imageData[i].imgUrl,
           size: [200, 200],
           properties: {
                // backgroundImage: this.options.imageData[i].imgUrl,
                color: "black",
                textAlign: 'center'
            }
        });
     aSurface.('click', function (){
        console.log("Test Click" + i);
        console.log(aSurface);
    }.bind(this));
})

Answer 2

您需要将事件处理程序封装在闭包中，否则所有表面都会以相同的单击事件结束。

for (var i = 0; i < this.options.imageData.length; i++) {
    aSurface = new ImageSurface({
        content: this.options.imageData[i].imgUrl,
        size: [200, 200],
        properties: {
            //whatever properties you want
        }
    });
    (function (aSurface) {
        aSurface.on('click', function () {
            console.log(aSurface.options.imageData.imgUrl);
        });
    }(aSurface);
}

单击GridLayout ImageSurfaces上的Event

2 个答案: