Creating an application with Twitter flight, components dont want to render more than once

Question

I'm working with Twitter Flight to construct a javascript application that interacts with an API we develop. I'm working on an architecture that will allow our users to login and out, or register for an account. At a high level, my manual testing procedure looks like this:

visit localhost/login, verify login form renders
click "sign up"
verify url changes to localhost/signup, verify form renders
click "log in"
repeat

Problem: when I start with login, navigate to signup, then back to login, the login component isn't listening for its render event anymore and never renders the login form in place of the signup form.

I'm not entirely sure how much of the application is going to be needed to really diagnose my logic, but I think that I have included all the relevant parts. I'm happy to post more code if needed, but below is our Mediator and Signup.js.

Thanks!

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

  })
})

The first thing that leaps out at me is that in signup.js, you're using a string to define the event name, whereas in mediator you're using the Event object. Just making sure the Event.render.singnup === "Event.render.signup" before I go any deeper... — Tom Hamshere, Jun 24 '13 at 09:30

score 0 · Answer 1 · answered Jun 20 '13 at 13:30

0

I'm still learning the ins and outs of Flight, I think the solution is to have a component that runs on every page load and checks the state of the user and renders the appropriate form.

answered Jun 20 '13 at 13:30

Adam Simpson

3,591
2
22
27

Creating an application with Twitter flight, components dont want to render more than once

1 Answers1