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

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()

machty/explanation.md

shime commented Oct 16, 2013