JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://elipster.net/misc/handlebars.js"></script>
<script src="http://elipster.net/misc/ember.js"></script>
<script src="http://elipster.net/misc/ember-data.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/x-handlebars" data-template-name="application">
<div>
{{#linkTo "versions"}}Versions{{/linkTo}}
</div>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="versions">
<div>
<h1>Versions</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Campaign name</th>
<th>Created</th>
<th>Last Modified</th>
<th>Site ID</th>
</tr>
</thead>
<tbody>
{{#each version in versions}}
<tr>
<td>{{#linkTo "version" version}}{{version.name}}{{/linkTo}}</td>
<td>{{version.created}}</td>
<td>{{version.lastmodified}}</td>
<td>{{version.siteId}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="version">
<div>
<h1>Version #{{id}}</h1>
<div>
<label for="name">Name</label>
{{view Ember.TextField elementId="name" valueBinding="name" placeholder="Name"}}
</div>
<div>
<label for="siteId">Site ID</label>
{{view Ember.TextField elementId="siteId" valueBinding="siteId" placeholder="Site ID"}}
</div>
<div>
<label for="created">Created</label>
{{view Ember.TextField elementId="created" valueBinding="created" placeholder="Created"}}
</div>
<div>
<label for="lastmodified">Last Modified</label>
...
JavaScript
window.App = Ember.Application.create({});
App.store = DS.Store.create({
revision: 11,
adapter: DS.FixtureAdapter
});
App.Version = DS.Model.extend({
name: DS.attr('string'),
siteId: DS.attr('string'),
created: DS.attr('string'),
lastmodified: DS.attr('string')
});
App.Version.FIXTURES = [
{
id: 1,
name: "test",
siteId: "site",
created: "crdate",
lastmodified: "lmdate"
},
{
id: 2,
name: "secondtest",
siteId: "whatsite",
created: "crdate",
lastmodified: "lmdate"
}
];
App.Router.map(function(match) {
match("/").to("versions");
match("/versions/:version_id").to("version")
});
App.VersionsRoute = Ember.Route.extend({
model: function() {
console.log('VersionsRoute model');
return App.Version.find();
},
setupControllers: function(controller, model) {
console.log('VersionsRoute setupControllers');
controller.set('versions', model);
}
});
App.VersionRoute = Ember.Route.extend({
model: function(params) {
console.log('VersionRoute model');
return App.Version.find(params.version_id);
},
setupControllers: function(controller, model) {
console.log('VersionRoute setupControllers');
controller.set('content', model);
}
});
App.VersionController = Ember.ObjectController.extend({
content: null
});