我正在使用 Twitter Flight 构建一个与我们开发的 API 交互的 JavaScript 应用程序。我正在研究一种允许我们的用户登录和退出或注册帐户的架构。在高层次上，我的手动测试过程如下所示：
- 访问 localhost/login，验证登录表单呈现
- 点击“注册”
- 验证对 localhost/signup 的 url 更改，验证表单呈现
- 点击“登录”
- 重复
问题：当我从登录开始，导航到注册，然后返回登录时，登录组件不再监听它的渲染事件，并且永远不会渲染登录表单来代替注册表单。
我不完全确定真正诊断我的逻辑需要多少应用程序，但我认为我已经包含了所有相关部分。如果需要，我很乐意发布更多代码，但下面是我们的 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)
})
})
})