使用Twitter航班創建應用程序，組件不想呈現多次

我正在使用Twitter Flight來構建與我們開發的API交互的JavaScript應用程序。我正在研究一種架構，允許我們的用戶登錄和註銷帳戶。在高層次上，我的手動測試的過程是這樣的：使用Twitter航班創建應用程序，組件不想呈現多次

訪問本地主機/登錄，驗證登錄表單呈現
點擊「註冊」
驗證網址更改爲localhost /註冊，驗證的形式呈現
點擊「登錄」
重複

問題：當我開始登錄，瀏覽到註冊，然後再返回到登錄，登錄組件不再監聽其渲染事件，也不會呈現登錄表單來代替註冊表單。

我不完全確定需要多少應用程序才能真正診斷我的邏輯，但我認爲我已經包含了所有相關部分。如果需要，我很高興發佈更多代碼，但下面是我們的Mediator和Signup.js。

謝謝！

// Mediator.js, responsible for: 
// - listening for navigation events, 
// - attaching the correct components to the DOM, 
// - and triggering AJAX requests or render events as appropriate. 

define([ 'flight/lib/component', 'app/session', 'app/events', 'app/components', 'app/routes' ], 
    function (defineComponent, session, Event, components, routes) { 
    return defineComponent(
     function() { 
     this.navigate = { 
      login: function(evt) { 
      // if we already have a valid user, send them home and abort the render 
      if (session.hasValidUser()) { 
       evt.stopPropagation() 
       router.navigateTo(routes.home) 
      } else { 
       components.layouts.login.attachTo('#page') 
       components.onboarding.login.attachTo('#login') 
       this.trigger(document, Event.render.login) 
      } 
      }, 

      signup: function(evt) { 
      if (session.hasValidUser()) { 
       evt.stopPropagation() 
       router.navigateTo(routes.home) 
      } else { 
       components.layouts.login.attachTo('#page') 
       components.onboarding.signup.attachTo('#login') 
       this.trigger(document, Event.render.signup) 
      } 
      }, 

     }; 

     this.after("initialize", function() { 
      this.on(Event.navigate.login, this.navigate.login); 
      this.on(Event.navigate.signup, this.navigate.signup); 
      this.on(Event.navigate.home, this.navigate.home); 
     }); 
     } 
    ) 
    } 
);

。

// app/components/signup.js, functionally equivalent to components/login.js 
// - listen for render.signup events 
// - render template, attach click handlers 

define(['flight/lib/component', 'app/lib/mustache', 'app/router'], function(component, mustache, router){ 
    return component(function(){ 

    this.signup = function(event) { 
     // process a form submit from the signup form 
    }; 

    this.render = function(){ 
     this.$node.html(mustache('app/templates/sign_up_form')); 

     this.on('#signupButton', "click", this.signup); 
     this.on('.loginLink', "click", router.navigateEvent(router.routes.login)); 
    } 

    this.after('initialize', function(){ 
     this.on(document, 'Event.render.signup', this.render) 
    }) 

    }) 
})

來源

2013-06-19 voxobscuro

跳過我的第一件事是，在signup.js中，您使用字符串來定義事件名稱，而在介體中，您使用的是Event對象。在深入研究之前，確保Event.render.singnup ===「Event.render.signup」... –

我還在學習飛行的來龍去脈，我認爲解決的辦法是有一個在每個頁面加載運行，並檢查用戶的狀態，並呈現適當的形式的組件。

來源

2013-06-20 13:30:50

使用Twitter航班創建應用程序，組件不想呈現多次

回答

相關問題