Triggers Famo.us未在音色示例中加载条形视图的构造函数

Triggers Famo.us未在音色示例中加载条形视图的构造函数,triggers,views,slidetoggle,famo.us,Triggers,Views,Slidetoggle,Famo.us,我正在使用Famo.us的无音色视图示例,我试图实现的是通过单击应用程序中的“条带视图”选项打开页面,并在单击“条带视图”选项后立即关闭菜单抽屉 为了实现这一功能,我阅读了Famo.us文档中的。并在我的示例中编写了以下代码 1使用emit方法从事件处理程序创建了一个函数来广播,并在Strip View的构造函数中调用它 条形图: 2然后在应用程序视图中创建了一个触发器方法 应用程序视图: 现在,这段代码所做的是创建另一个与先前条带重叠的条带,它只在新创建的条带视图上工作,而不在其他条带上工作,

我正在使用Famo.us的无音色视图示例,我试图实现的是通过单击应用程序中的“条带视图”选项打开页面,并在单击“条带视图”选项后立即关闭菜单抽屉

为了实现这一功能,我阅读了Famo.us文档中的。并在我的示例中编写了以下代码

1使用emit方法从事件处理程序创建了一个函数来广播,并在Strip View的构造函数中调用它

条形图:

2然后在应用程序视图中创建了一个触发器方法

应用程序视图:

现在,这段代码所做的是创建另一个与先前条带重叠的条带,它只在新创建的条带视图上工作,而不在其他条带上工作,这意味着当它返回到srip视图时,它只加载条带视图的默认_选项,因为新生成的条带和重叠的条带标题为famo.us


请告诉我哪里出了问题,以及如何通过关闭菜单抽屉在应用程序中打开新视图。

您的famo.us项目中是否有名为“data”的文件夹,其中包含“StripData.js”文件


我问这个问题是因为我下载了初学者工具包,但在里面找不到该文件。

我基本上不确定您的代码和演示代码是什么。那么,为了澄清一下,您是否只希望能够单击其中一个菜单选项,打开一个新页面并关闭要滑动的菜单?
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 HeaderFooter = require('famous/views/HeaderFooterLayout');
    var FastClick = require('famous/inputs/FastClick');

    var check = true;
    Boolean(check);

    function StripView() {

        View.apply(this, arguments);

        _createBackground.call(this);
        _createIcon.call(this);
        _createTitle.call(this);

        _setListenersForStripView.call(this);
    }

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

    StripView.DEFAULT_OPTIONS = {
        width: 320,
        height: 55,
        angle: -0.2,
        iconSize: 32,
        iconUrl: 'img/strip-icons/famous.png',
        title: 'Famo.us',
        fontSize: 26,
        onload: 'StripView()'
    };

    function allFunctions()
    {
        _createBackground();
        _createIcon();
        _createTitle();
    }

    function _createBackground() {
        this.backgroundSurface = new Surface({
            size: [this.options.width, this.options.height],
            properties: {
                backgroundColor: 'black',
                boxShadow: '0 0 1px black'
            }
        });


        var rotateModifier = new StateModifier({
            transform: Transform.rotateZ(this.options.angle)
        });

        var skewModifier = new StateModifier({
            transform: Transform.skew(0, 0, this.options.angle)
        });

        this.add(rotateModifier).add(skewModifier).add(this.backgroundSurface);

        //  this.backgroundSurface.on("touchend", function(){alert("Click caught")})
    }

    function _createIcon() {
        var iconSurface = new ImageSurface({
            size: [this.options.iconSize, this.options.iconSize],
            content: this.options.iconUrl,
            pointerEvents: 'none'
        });

        var iconModifier = new StateModifier({
            transform: Transform.translate(24, 2, 0)
        });

        this.add(iconModifier).add(iconSurface);
        // iconSurface.on("click", function(){alert("Click caught")})
    }

    function _createTitle() {
        this.titleSurface = new Surface({
            size: [true, true],
            pointerEvents: 'none',
            content: this.options.title,
            properties: {
                color: 'white',
                fontFamily: 'AvenirNextCondensed-DemiBold',
                fontSize: this.options.fontSize + 'px',
                textTransform: 'uppercase',
                //  pointerEvents : 'none'
            }
        });

        var titleModifier = new StateModifier({
            transform: Transform.thenMove(Transform.rotateZ(this.options.angle), [75, -5, 0])
        });

        this.add(titleModifier).add(this.titleSurface);
    }

    function _setListenersForStripView() {
        this.backgroundSurface.on('touchend', function() {
            this._eventOutput.emit('menuToggleforStripView');
            alert('clicked on title');
        }.bind(this));
    }

    module.exports = StripView;
});
define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Easing = require('famous/transitions/Easing');
    var Transitionable = require('famous/transitions/Transitionable');
    var GenericSync = require('famous/inputs/GenericSync');
    var MouseSync = require('famous/inputs/MouseSync');
    var TouchSync = require('famous/inputs/TouchSync');
    GenericSync.register({'mouse': MouseSync, 'touch': TouchSync});

    var PageView = require('views/PageView');
    var StripView = require('views/StripView');

    var MenuView = require('views/MenuView');
    var StripData = require('data/StripData');

    function AppView() {
        View.apply(this, arguments);

        this.menuToggle = false;
        this.pageViewPos = new Transitionable(0);
        this.stripViewPos = new Transitionable(0);

        _createPageView.call(this);
        _StripView.call(this);
        _createMenuView.call(this);

        _setListeners.call(this);
        _handleSwipe.call(this);
        _setListenersForStripView.call(this);
    }

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

    AppView.DEFAULT_OPTIONS = {
        openPosition: 276,
        transition: {
            duration: 300,
            curve: 'easeOut'
        },
        posThreshold: 138,
        velThreshold: 0.75
    };

    function _createPageView() {
        this.pageView = new PageView();
        this.pageModifier = new Modifier({
            transform: function() {
                return Transform.translate(this.pageViewPos.get(), 0, 0);
            }.bind(this)
        });

        this._add(this.pageModifier).add(this.pageView);
    }

    function _StripView() {
        this.stripView = new StripView();
          this.stripModifier = new Modifier({
            transform: function() {
                return Transform.translate(this.stripViewPos.get(), 0, 0);
            }.bind(this)
        });

        this._add(this.stripModifier).add(this.stripView);
    }

    function _createMenuView() {
        this.menuView = new MenuView({stripData: StripData});

        var menuModifier = new StateModifier({
            transform: Transform.behind
        });

        this.add(menuModifier).add(this.menuView);
    }

    function _setListeners() {
        this.pageView.on('menuToggle', this.toggleMenu.bind(this));
    }

    function _setListenersForStripView() {
        this.stripView.on('menuToggleforStripView', this.toggleMenu.bind(this));
    }

    function _handleSwipe() {
        var sync = new GenericSync(
                ['mouse', 'touch'],
                {direction: GenericSync.DIRECTION_X}
        );

        this.pageView.pipe(sync);

        sync.on('update', function(data) {
            var currentPosition = this.pageViewPos.get();
            if (currentPosition === 0 && data.velocity > 0) {
                this.menuView.animateStrips();
            }

            this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
        }.bind(this));

        sync.on('end', (function(data) {
            var velocity = data.velocity;
            var position = this.pageViewPos.get();

            if (this.pageViewPos.get() > this.options.posThreshold) {
                if (velocity < -this.options.velThreshold) {
                    this.slideLeft();
                } else {
                    this.slideRight();
                }
            } else {
                if (velocity > this.options.velThreshold) {
                    this.slideRight();
                } else {
                    this.slideLeft();
                }
            }
        }).bind(this));
    }

    AppView.prototype.toggleMenu = function() {
        if (this.menuToggle) {
            this.slideLeft();
        } else {
            this.slideRight();
            this.menuView.animateStrips();
        }
    };

    AppView.prototype.slideLeft = function() {
        this.pageViewPos.set(0, this.options.transition, function() {
            this.menuToggle = false;
        }.bind(this));
    };

    AppView.prototype.slideRight = function() {
        this.pageViewPos.set(this.options.openPosition, this.options.transition, function() {
            this.menuToggle = true;
        }.bind(this));
    };

    module.exports = AppView;
});