Ryan Ricard

www topics worth sharing.

Ember.js: How Route Transitions Affect Application State

Below are demonstrations of how transitioning affects the application state of an Ember application. Each demonstration renders large numbers to help indicate state change in each template context. When a template’s number changes, it means the most recent transition was routed through the template’s route.

In the first example, transitioning only occurs between sub routes of the resource route ‘dogs’. Notice the numbers in the application and dogs template contexts do not change. This is because transitioning between sub routes does not reroute through their parent.

In the next example, transitioning occurs across resource routes ‘dogs’ and ‘cats’. Notice the number in the application template context does not change; while the numbers in the dogs and cats template contexts now differ with each transition.

In this example we bring it all together. As you navigate through the application, pay close attention to when template contexts are updated.

None of the demonstrated behavior is earth shattering. It is however useful to understand how transitioning in Ember affects your templates. These demonstrations are the result of myself needing to better understand Ember’s behavior as I worked to maintain state at various places in an application.