Navigation Lifecycle

Now that you understand Renderers and Transitions, how does it all fit together?

Let's use a real world example to find out:

  1. A user clicks a link in your app
  2. Taxi will go and fetch the new page the user has requested, and attach it to the current Document so images etc start downloading
  3. Taxi checks to see which Transition should be used
  4. The current Renderer's onLeave method is called
  5. Then the chosen Transition's onLeave.
    The old page content is removed here unless you set removeOldContent: false when initing Taxi.
  6. Then the Renderer's onLeaveCompleted
  7. Next, Taxi will add the new page's content to the container
  8. Taxi will look at the new page content and call the onEnter method of the Renderer set via the new page's data-taxi-view attribute, or the default if not defined
  9. Then call the Transition's onEnter method
  10. Finally, when the transition is all finished, the new Renderer's onEnterComplete is called
What's next: