Famo.us not loading Timbre 예제의 Strip View 생성자

Question

Timbre View Famo.us의 예제는 작동하지 않습니다. 달성하려는 것은 단순히 앱의 스트립 뷰 옵션을 클릭하고 닫는 것으로 페이지를 여는 것입니다. 스트립 뷰 옵션을 클릭하자 마자 메뉴 드로어

이 기능을 구현하기 위해 Famo.us 문서에서 Broad Cast and Listing을 읽었습니다. 내 예제에서는 다음 코드를 작성했습니다.

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) 그런 다음 앱보기에

앱보기를 트리거 방법을 만들어 :

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라는 제목을 갖기 때문에 sip 뷰로 돌아올 때 의미합니다.

내가 잘못 가고있는 곳을 알려주세요. 내 응용 프로그램에서 메뉴 창을 닫아서 새보기를 열려면 어떻게해야합니까?

Answer 1

famo.us 프로젝트의 'StripData.js'파일에 'data'라는 폴더가 있습니까?

스타터 키트를 다운로드 했으므로 묻습니다. 그 파일을 찾지 못했습니다.