Получить GenericSync на поверхность или просмотр

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 в массиве. Ну, такая, что, кажется, не существует ...

UPDATE 1:

Ответ не должен следовать мой код выше. Голы «высокого уровня»:

1. Создайте список поверхностей с изображениями. Данные из некоторого массива.

2. Detect нажмите и сенсорным событием на поверхности и сделать что-то с этой поверхностью

В принципе, я пытался сделать «авансовый» версию этого примера https://github.com/Famous/examples/blob/master/src/examples/core/View/example.js

Answer 1

Так GenericSync работает как агрегатор классов синхронизации. Классы Sync предоставляют вам полезную информацию, основанную на более простых событиях, таких как mousedown и mousemove. Это означает, что если вам нужна дополнительная информация, вам придется сделать MouseSync, например, отказаться от него.

Если вы не хотите писать свой собственный класс MouseSync, просто взгляните на то, где MouseSync испускает свои события. В функции обработки событий вы можете получить доступ к исходному событию. Вы можете прикрепить все, что вы хотите к полезной нагрузке, которая излучается .. Возьмем, к примеру _handleEnd в MouseSync.js

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.

Надеюсь, это поможет!

EDIT обновленного ВОПРОСА:

Вы можете использовать события по умолчанию, доступных через известные поверхности. К ним относятся свойство происхождения в полезной нагрузке.

MouseDown, MouseMove MouseUp, touchstart, TouchMove, touchend

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

В большинстве из этих случаев, я бы обнаружить связь с чем-то вроде Modernizr, и применяются только необходимые события. Удачи!