Update: This is soon-to-be deprecated due to Ember.Router!
One of the drawbacks of single paged apps is when you no longer depend on distinct URLs for each of the pages - URLs get dropped in favor of hosting the entire app under one root URL ( http://example.com/app ).
Outlined here is an architecture to maintain distinct URLs with Ember.js applications.
If you’ve used Django (urls.py), Sinatra, Rails, Express for Node - this should look familiar. Keep in mind it’s running in the browser.
Ember.js is a project run by Tom Dale and Yehuda Katz. It’s a client-side MVC framework - the benefits of using Ember.js (or Backbone.js) go beyond the scope of this article.
One of Ember.js’s most useful, yet least documented features, is Ember.StateManager.
Ember.StateManager is easy to use - you need a rootElement (defaults to
body) and a few distinct
Ember.ViewStates, which at their simplest - just need a
Switching between states will remove the
currentState view, and insert the new state’s view, and run appropriate
exit events if you wanted.
Ember.StateManager.goToState ( strStateName ) if enough to switch the state. Pretty easy.
Hijacker takes a jQuery Anchor tag selector (e.g.
.container a[href]), and “hijacks” click events to push the new URL into Director instead of allowing a page jump.
This let’s us keep our markup semantically pure - we don’t have to add click handlers everywhere, just classic
<a href="/product/10101/">Product 10101</a>. Perfect for porting an existing application.
A user clicks a link - Director changes the URL and runs a callback that updates Ember’s current state.
Now that user can refresh the page, or share the link, and the app follows the same path as it did when somebody clicked a link.
Effectively, URLs are controlling the state of our application, not click events.
Notes: I used Director instead of an user contributed addon, SproutCore Routes, because I wanted to keep my URL routing and application decoupled. Checkout Sproutcore Routes if you’d rather use that.