explanation of new transition redirect/prevention on http://emblem-test.herokuapp.com/

explanation.md

Check out the progress on redirectable/preventable transitions.

This consists almost entirely of a rewrite of router.js, with hardly any changes to the Ember codebase. Lots of things have been added router-wise, but this particular demo focuses on how attempted transitions can be intercepted/redirected/prevented/decorated by defining transition event handlers in a transitions hash on Ember.Route. I also added support for URL-less routes (see the URL-less States Demo at the top in the link below). You can test this out yourself with this branch of Ember, which has the new router.js code i've been working on in it.

I ended up reusing the Emblem test app, so try not to be distracted by the template syntax stuff (sorry, twas most readily available for trying this new transition code). You can check out the code for this transition demo here. Below I've highlighted the most relevant bits:

Emblemtest.Router.map ->
  @route "home", { path: "/" }
  @route "about", { path: "/about" }
  @route "favorites", { path: "/favs" }

  @route "login"
  @resource "admin", ->
    @route "manageUsers"
    @route "manageWidgets"
    @route "manageThings"

Emblemtest.Router.reopen
  location: 'history'

# Define transition events here.
Emblemtest.AdminRoute = Ember.Route.extend
  transitions: 
    'from *': (e) ->
      # Make sure the user's logged in
      unless @controllerFor('admin').loggedIn
        e.transitionTo 'login'

Emblemtest.AdminManageWidgetsRoute = Ember.Route.extend
  transitions:
    'to *': (e) ->
      if @controller.get('userHasTypedStuffIn')
        unless confirm("Are you sure you want to abandon progress on this form?")
          e.preventTransition()

  setupController: (controller) ->
    controller.set('name', "")

Emblemtest.AdminManageUsersRoute = Ember.Route.extend
  transitions:
    'to home': (e) ->
      # Note that we're not actually preventing a transition here.
      # You can just use this as a hook for whatever action,
      # perhaps a google analytics thing, or some animation, whatever.
      alert "You are now transitioning back to '/'"

# URL-less routes (or, routeless substates as people have been calling it)

# TODO: make this happen automatically by the Router.map DSL,
# perhaps with this.state instead of this.route, so that
# you don't have to manually extend all URL-less routes.
Emblemtest.State = Ember.Route.extend
  notAccessibleByURL: true

Emblemtest.RoutelessIndexRoute = Emblemtest.State.extend()
Emblemtest.RoutelessStateOneRoute = Emblemtest.State.extend()
Emblemtest.RoutelessStateTwoRoute = Emblemtest.State.extend()
Emblemtest.RoutelessStateThreeRoute = Emblemtest.State.extend()

Hi Alex,

This looks very nice, it seems weird to me that Ember doesn't have proper before and after filters to do as you describe in an earlier post. I checked the link on top of this page but didn't see an indication of its progress. Can you tell me if this is in a release or even planned to be released? Or if not this something simular?

Cheers,

-Mark

Looks great, why is it not merged yet?