Question

教程中没有介绍它，但我对幻灯片教程中“这个”如何影响曲面放置的行为感到困惑。这是'slideView'视图：

/ * 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;
});

从这个例子中，有3个表面，背景，电影和照片。背景不使用曲面修改器，胶片使用曲面修改器但未绑定到'this'，并且照片确实使用了绑定到'this'的曲面修改器。为什么照片需要被绑定到'这个'而不是电影？我已经做了一些尝试澄清，但行为真的不稳定。

Answer 1

当您不想在外部世界重用变量时，请使用本地范围的变量（如filmModifier）。但是，如果要在函数外部到达修饰符，则一种方法是将其绑定到此。因此，似乎想要在其他地方或以后重复使用photoModifier。查看幻灯片教程的最终版本，您将得到答案。

Answer 2

回答你的问题“为什么照片需要绑定'这个'而不是电影？”

稍后将在视图中使用photoModifier来创建photo的转换。
filmModifier仅用于在构建时设置film，以后不需要访问。

这是一项设计决定，可以稍后修改。

注意：在您的代码示例中，您只显示了SlideView示例的第一个修订版。 photoModifier <{1}}来自SlideView fadeIn()的外部方法的SlideView.prototype.fadeIn = function() { this.photoModifier.setOpacity(1, { duration: 1500, curve: 'easeIn' }); this.shake(); }; 。

{{1}}

在famo.us幻灯片教程中使用'this'

2 个答案: