JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://raw.github.com/dgeb/ember_data_example/master/vendor/assets/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#linkTo "ninjas"}}To the Ninjas!{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="ninjas">
<h1>Ninjas List</h1>
<ul>
{{#each ninja in content}}
<li>{{#linkTo "ninja" ninja}}{{ninja.name}}{{/linkTo}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="ninja">
Ninja: {{ name }}
{{#linkTo "ninjas"}}Back to ninjas{{/linkTo}}
</script>
CoffeeScript
window.App = Ember.Application.create()
App.Router.map ->
@resource 'ninjas', ->
@resource 'ninja', path: ':ninja_id'
App.Store = DS.Store.extend
revision: 12
adapter: DS.FixtureAdapter
App.NinjasRoute = Ember.Route.extend
model: -> App.Ninja.find()
App.NinjaRoute = Ember.Route.extend
renderTemplate: -> @render into: 'application'
App.Ninja = DS.Model.extend
name: DS.attr 'string'
App.Ninja.FIXTURES = [
{id: 1, name: 'Ninja #1'}
{id: 2, name: 'Ninja #2'}
]