javascript - 获取每个表面或 View 的 GenericSync

Question

我想做一个带有一堆表面图像的滚动列表。然后，当我在表面上单击或触摸时，我希望获得受影响的surface对象并对其执行某些操作(例如更改 >内容)。

我下面的设置方式是使用scrollview ->container ->view ->modifier->surface。我不知道它是否有效(也许是多余的)。但我无法在每个 sync 对象的 console.log(data) 中获取确切的对象触发事件。

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

  var Transform = require('famous/core/Transform');
  var Modifier   = require("famous/core/Modifier");

  var GenericSync = require("famous/inputs/GenericSync");
  var MouseSync   = require("famous/inputs/MouseSync");
  var TouchSync   = require("famous/inputs/TouchSync");

  var mainContext = Engine.createContext();

  GenericSync.register({
      "mouse" : MouseSync,
      "touch" : TouchSync
  });

  var scrollview = new Scrollview({});

  var listContainer = [];
  var questionContainer = [];
  var imgSurface = [];
  var sync = [];

  var imgModifier = new Modifier({origin: [0.5, 0.5]});

  for (var i=0; i<10; i++) {
    questionContainer[i] = new ContainerSurface({
      size: [undefined, 300],
      properties:{
        overflow: 'hidden'
      }
    });

    imgSurface[i] = new Surface({
      content: '<img width="100%" src="http://placehold.it/400x300">'
    });

    sync[i] = new GenericSync(
        ["mouse", "touch"],
        {direction : GenericSync.DIRECTION_X}
    );

    questionContainer[i].add(imgModifier).add(imgSurface[i]);

    questionContainer[i].pipe(sync[i]);
    questionContainer[i].pipe(scrollview);

    sync[i].on("end", function(data) {
      console.log(data);
    });

    listContainer.push(questionContainer[i]);
  }

  scrollview.sequenceFrom(listContainer);
  mainContext.add(scrollview);
});

那么在这种情况下如何访问触发surface或view？我希望得到类似 data.triggerObject.setContent() 的东西，它引用数组中特定的 surface 。呃，这种事好像不存在……

更新 1:

答案不需要遵循我上面的代码。我的“高水平”目标是:

1. 生成带有图像的表面列表。来自某个数组的数据。

2. 检测每个表面的点击和触摸事件并对该表面执行某些操作

基本上，我尝试做这个例子的“高级”版本 https://github.com/Famous/examples/blob/master/src/examples/core/View/example.js

Answer 1

因此，GenericSync 充当 Sync 类的聚合器。 Sync 类为您提供基于简单事件(例如 mousedown 和 mousemove)的有用信息。这意味着如果您想要更多信息，您将不得不放弃 MouseSync。

如果您不想编写自己的 MouseSync 类，只需查看 MouseSync 发出其事件的位置即可。在事件处理函数中，您可以访问原始事件。您可以将任何您想要的内容附加到发出的有效负载中。以 MouseSync.js 中的 _handleEnd 为例

function _handleEnd(event) {
    if (!this._prevCoord) return;

    // I added this line..
    this._payload.origin = event.origin;

    this._eventOutput.emit('end', this._payload);
    this._prevCoord = undefined;
    this._prevTime = undefined;
}

如果直接编辑源代码并跟踪更改感觉太奇怪，您可能只想将 MouseSync 复制到不同的类名，例如。 MyMouseSync 并仅更改该文件。同样的逻辑也适用于 TouchSync。

希望这有帮助!

编辑您更新的问题:

您可以使用著名表面提供的默认事件。其中包括有效负载中的 origin 属性。

mousedown、mousemove、mouseup、touchstart、touchmove、touchend

surface.on('touchstart',function(e){
    touchedSurface = e.origin;
});

在大多数情况下，我会检测与 Modernizr 等内容的接触，并仅应用必要的事件。祝你好运!