title: {{action}} link with transitionTo using relationship id
body: <p>Given a view with a context like <code>{ id: 1, form_id: 5}</code>, I want to create an <code>{{action}}</code> link to the form using the <code>form_id</code>.</p>
  
  <p>My view code looks like:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="group"&gt;
    {{action showForm form_id href=true}}
  &lt;/script&gt;
  </code></pre>
  
  <p>And the action in my router looks like:</p>
  
  <pre><code>showForm: function(router, event) {
    var form_id = event.context;
    router.transitionTo('root.form', { id: form_id });
  },
  </code></pre>
  
  <p>I get an error that reads:</p>
  
  <pre><code>Uncaught Error: assertion failed: You must specify a target state for event 'showForm' in order to link to it in the current state 'root.index'.
  </code></pre>
  
  <p>I'm guessing that the problem is with the way I'm setting up the context for <code>transitionTo</code>, but I haven't been able to figure out the correct solution.</p>
  
  <p>Here is the full code to reproduce the problem:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
    {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="group"&gt;
    {{action showForm form_id href=true}}
  &lt;/script&gt;
  
  MyApp = Ember.Application.create({
    autoinit: false
  });
  
  MyApp.router = Ember.Router.create({
    root: Ember.Route.extend({
      index: Ember.Route.extend({
        route: '/',
  
        // Throws error: 
        //    You must specify a target state for event 'showForm' in 
        //    order to link to it in the current state 'root.index'
        //
        showForm: function(router, event) {
          var form_id = event.context;
          router.transitionTo('root.form', { id: form_id });
        },
  
        // Won't work because form deserialize finds id, not form_id 
        //showForm: Em.Route.transitionTo('root.form'),
  
        // This won't work either
        // showForm: Em.Route.transitionTo('root.form', { id: this.form_id }),        
  
        connectOutlets: function( router, context ){
          var group = Em.Object.create({ id:1, form_id: 5 });
          router.get( 'applicationController' ).connectOutlet( 'group', group );
        }
      }),
      form: Ember.Route.extend({
        route: '/form/:id',
        serialize: function( router, context ){
          return { id: context.id }
        },
        deserialize: function( router, context ){
          var form = Em.Object.create({ id: 5, name: 'my form' });
          return MyApp.Form.find( context.id );
        },
        connectOutlets: function( router, context ){
          // left out for fiddle example 
        }
      })
    })
  });
  
  MyApp.ApplicationController = Ember.Controller.extend({});
  
  MyApp.GroupController = Em.ObjectController.extend({});
  MyApp.GroupView = Em.View.extend({ templateName:  'group' });
  
  MyApp.initialize(MyApp.router);​
  </code></pre>
  
  <p>And the cooresponding fiddle:</p>
  
  <p><a href="http://jsfiddle.net/jefflab/LJGCz/" rel="noreferrer">http://jsfiddle.net/jefflab/LJGCz/</a></p>