Question

我想用一堆表面图像做一个滚动列表。然后，当我在表面上click或touch时，我希望surface对象受到影响并对其执行某些操作（例如更改content）。

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

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 ：

答案不需要遵循上面的代码。我的高水平＆＃34;目标是：

生成带图像的曲面列表。来自某个阵列的数据。
检测每个表面的点击和触摸事件，并对该表面执行某些操作

基本上，我试图做一个＆＃34;提前＆＃34;此示例的版本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这样的东西，并且只应用必要的事件。祝你好运！

每个曲面或视图获取GenericSync

1 个答案: