Famo.us不加載音軌視圖的構造函數示例

Question

我在工作no Timbre查看Famo.us的示例，我試圖實現的只是通過單擊應用程序中的strip view選項打開頁面並關閉菜單抽屜只要我點擊剝離視圖選項

爲實現此功能我已閱讀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; 
}); 

現在這個代碼做什麼，是創建另一個重疊前面的帶它僅適用於新創建的帶鋼視圖，而不適用於其他帶鋼，這意味着當它返回到srip視圖時，它僅加載帶鋼視圖的DEFAULT_OPTIONS，因爲正在生成並重疊的帶鋼名爲famo.us

請讓我知道我要去哪裏錯了，如何通過關閉菜單抽屜在我的應用程序中打開一個新視圖。

Answer 1

您的famo.us項目中的「StripData.js」文件有一個名爲'data'的文件夾嗎？

我在問，因爲我下載了入門套件，並且沒有找到該文件。