Use of 'this' in famo.us slideshow tutorial

Question

It's not covered in the tutorial, but I'm confused by how 'this' is impacting the behavior of surface placement in the slideshow tutorial. This is the 'slideView' view:

/* SlideView */

define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var SlideData = require('data/SlideData');


    // SlideView constructor function
    // runs once for each new instance
    function SlideView() {
        View.apply(this, arguments);

        this.rootModifier = new StateModifier({
            size: this.options.size
        });

        this.mainNode = this.add(this.rootModifier);

        _createBackground.call(this);
        _createFilm.call(this);
        _createPhoto.call(this);
    }

    SlideView.prototype = Object.create(View.prototype);
    SlideView.prototype.constructor = SlideView;

    SlideView.DEFAULT_OPTIONS = {
        size: [400, 450],
        filmBorder: 15,
        photoBorder: 3,
        photoUrl: SlideData.defaultImage
    };


    function _createBackground(){
        var background = new Surface({
               // undefined size will inherit size from parent modifier
            properties: {
                backgroundColor: '#FFFFF5',
                boxShadow: '0 10px 20px -5px rgba(0, 0, 0, 0.5)'
            }
        });

        this.mainNode.add(background);
    }

    function _createFilm() {
        this.options.filmSize = this.options.size[0] - 2 * this.options.filmBorder;

        var film = new Surface({
            size: [this.options.filmSize, this.options.filmSize],
            properties: {
                backgroundColor: '#222',
                zIndex: 1
            }
        });

        var filmModifier = new StateModifier({
            origin: [0.5, 0],
            align: [0.5, 0],
            transform: Transform.translate(0, this.options.filmBorder, 1)
        });

        this.mainNode.add(filmModifier).add(film);
    }

    function _createPhoto() {
        var photoSize = this.options.filmSize - 2 * this.options.photoBorder;

        var photo = new ImageSurface({
            size: [photoSize, photoSize],
            content: this.options.photoUrl,
            properties: {
                zIndex: 2
            }
        });

        this.photoModifier = new StateModifier({
            origin: [0.5, 0],
            align: [0.5, 0],
            transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2)
        });

        this.mainNode.add(this.photoModifier).add(photo);
    }


    module.exports = SlideView;
});

From this example, there are 3 surfaces, the background, the film, and the photo. The background doesn't use a surface modifier, the film uses a surface modifier but is not bound to 'this', and the photo does use a surface modifier that is bound to 'this'. Why does the photo need to be bound to 'this' but not the film? I've done a little playing around with it to try and clarify but the behavior is really erratic.

Answer 1

Use local scoped variable (like filmModifier) when you don't want to reuse the variable in outside world. However, if you want to reach the modifier outside the function, then one way is to bind it to this. So it seems photoModifier is wanted to be reused somewhere else or later. Check the final version of Slideshow tutorial and you will get the answer.

Answer 2

To answer your question "Why does the photo need to be bound to 'this' but not the film?"

• The photoModifier will be used later in the view to create a transition of the photo.
• The filmModifier will only be used to set the film when constructed, and will not need to be accessed later.

This is a design decision, and could be modified later.

Note: in your code example you are only showing a first revision of the SlideView example. Here is the code example of the photoModifier being accesses from an external method of the SlideView called fadeIn().

SlideView.prototype.fadeIn = function() {
    this.photoModifier.setOpacity(1, { duration: 1500, curve: 'easeIn' });
    this.shake();
};