Famo.us не загружает конструктор Strip View в примере Timbre

Я не работаю с примером Timbre View для Famo.us, и я пытаюсь просто открыть страницу, щелкнув параметры просмотра полосы в приложении и закрыв ящик меню, как только я нажму на опцию просмотра полосы.

для достижения этой функциональности я прочитал Трансляцию и листинг из документации Famo.us. и написал следующий код в моем примере.

1) создал функцию для вещания из обработчика событий с помощью метода emit и вызвал ее в конструкторе Strip View.

Просмотр полосы:

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

2) Затем создал метод Trigger в App View.

Просмотр приложения:

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

теперь этот код создает еще одну полосу, перекрывающую предыдущие полосы, и он работает только с вновь созданным представлением полосы, но не с другими полосами, что означает, что когда он возвращается к представлению полосы, он загружает только DEFAULT_OPTIONS представления полосы, потому что полоса который создается заново и перекрывается, называется famo.us

Пожалуйста, дайте мне знать, где я ошибаюсь и как я могу открыть новое представление в своем приложении, закрыв ящик меню.


person Ahsan Hussain    schedule 01.10.2014    source источник
comment
В основном я не уверен, какой у вас код и какой демо-код. Итак, просто чтобы уточнить, вы просто хотите иметь возможность щелкнуть один из пунктов меню и открыть новую страницу, а меню закрыть?   -  person aintnorest    schedule 03.10.2014


Ответы (1)


У вас есть папка с именем «data» с файлом «StripData.js» в вашем проекте famo.us?

Я спрашиваю, потому что скачал Starter Kit и не нашел этого файла внутри.

person Cassildo    schedule 19.12.2014