JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each item in content}}
      <button {{action "clickedDetailButton" item}}>Item {{item.id}}</button>
  {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="detail">
    <h2>This is the detail template</h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="detail/index">
  Detail name: {{name}}
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({LOG_TRANSITIONS: true});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
      controller.set('content', [
          {detail_id:1,name:'item1'}, 
          {detail_id:2,name:'item2'},
          {detail_id:3,name:'item3'}
      ]);
  }
});

App.IndexController = Em.Controller.extend({
    clickedDetailButton: function(obj) {
        this.transitionTo('detail',obj);
    }
});

App.DetailRoute = Ember.Route.extend({
    setupController: function(controller,model) {
      console.log('In DetailRoute, model: ', model);
      controller.set('content',model);
    }
});

App.DetailIndexRoute = Ember.Route.extend({
    model: function(params) {
        return this.modelFor("detail");
    },
    setupController: function(controller,model) {
        console.log('In DetailIndexRoute, model: ' + model);
        controller.set('content',model);
    }
});

App.Router.map(function(){
    this.resource('detail', {path: 'detail/:detail_id'}, function(){});
});