JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script src="http://elipster.net/misc/ember-data.js"></script>
<div id="content"></div>
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="cars">
<h1>Cars</h1>
<hr>
{{#each car in controller}}
{{#linkTo 'details' car.details}}{{car.name}}{{/linkTo}}
{{/each}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="details">
<hr>
<h1>Chosen Car Details</h1>
<p>{{name}}</p>
<p>{{color}}</p>
<p>{{wheels}}</p>
{{#linkTo cars}}Back{{/linkTo}}
</script>
CSS
#content {
margin: 20px;
}
h1 {
font-weight: bold;
}
p {
padding: 4px;
}
JavaScript
window.App = Ember.Application.create({
rootElement: '#content'
});
App.Router.map(function() {
this.resource('cars', function() {
this.resource('details', {path: ':details_id'});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('cars');
}
});
App.CarsRoute = Ember.Route.extend({
model: function() {
return App.Cars.find();
}
});
App.CarsController = Ember.ArrayController.extend();
App.Cars = DS.Model.extend({
name: DS.attr('string'),
details: DS.belongsTo('App.Details')
});
App.Details = DS.Model.extend({
name: DS.attr('string'),
color: DS.attr('string'),
wheels: DS.attr('string')
});
// Models
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Cars.FIXTURES = [{
id: "1",
name: 'Alfa Romeo',
details: 1
}, {
id: "2",
name: 'Mercedes',
details: 2
}, {
id: "3",
name: 'BMW',
details: 3
}, {
id: "4",
name: 'Ford',
details: 4
}];
App.Details.FIXTURES = [{
id: "1",
name: 'Alfa Romeo',
color: 'Red',
wheels: '14'
}, {
id: "2",
name: 'Mercedes',
color: 'Black',
wheels: '16'
}, {
id: "3",
name: 'BMW',
color: 'Yellow',
wheels: '17'
}, {
id: "4",
name: 'Ford',
color: 'Blue',
wheels: '15'
}];