JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <a {{action goHome href=true}}>go home</a>
</script>

JavaScript

App = Em.Application.create({});

App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.Router = Em.Router.extend({
    enableLogging: true,

    root: Em.Route.extend({
        
        index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('application');
            }
        }),
        
        // why does this work?
        goHome: Em.Route.transitionTo('home'),
        
        // ...but not this? Am I missing something?
        goHome2: function(router, context) {
            router.transitionTo('home', context);
        },
        home: Em.Route.extend({
            route: 'home'
        }),
        
        eventTransitions: {
           goHome2: 'home'
        }
    })
});

App.initialize();