Famo.us - Using events on surfaces in a loop

Question

I have a loop that creates surfaces from "TribesView" and pipes them into a scroll view, the loop also creates a "ProductView" with a modifier and adds this to a context. I want to bind an event to the "ProductView" surface where if the surface is clicked then set the opacity to '1'. What I have so far only sets the opacity to the last "ProductView" in the array regardless of which "TribeView" is clicked. Here is the code:

for (var t = 0; t < tribesLength; t++) {
    var tribe = new TribesView({tribes: tribes, tribe: t});
    var tribeProduct = new ProductView({tribes: tribes, tribe: t});
    var productModifier = new StateModifier({
        opacity: '0'
    });

    tribe.on('click', function() {
        productModifier.setOpacity(1)
    });

    productContext.add(productModifier).add(tribeProduct);

    tribe.pipe(scrollView);
    surfaces.push(tribe);
}

Answer 1

Yes, you want to bind the productModifier to the function. When you bind an object, it becomes represented as 'this' within the function.

Here is how it should be done.. Good luck!

tribe.on('click', function() {
    this.setOpacity(1);
}.bind(productModifier));