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="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">
{{outlet page}}
</script>
<script type="text/x-handlebars" data-template-name="postsView">
{{#each content}}
<a {{action showPost href=true}} >{{title}}</a>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="postView">
{{title}}
</script>
CSS
header h1 {
width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
width: 100%; text-align: center;
}
header nav a {
color: #008Bff; cursor: pointer;
}
p {
padding: 20px;
}
JavaScript
App = Ember.Application.create({
ready: function(){
App.set('router', App.Router.create());
App.initialize(App.router);
}
});
/* Create the DS.Adapter and DS.Store */
App.adapter = DS.Adapter.create({
find: function(store, type, id) {
var url = type.url;
url = url.fmt(id);
jQuery.getJSON(url, function(data) {
// data is a Hash of key/value pairs. If your server returns a
// root, simply do something like:
// store.load(type, id, data.person)
store.load(type, id, data);
});
},
findMany: function(store, type, ids) {
var url = type.url;
url = url.fmt(ids.join(','));
jQuery.getJSON(url, function(data) {
// data is an Array of Hashes in the same order as the original
// Array of IDs. If your server returns a root, simply do something
// like:
// store.loadMany(type, ids, data.people)
store.loadMany(type, ids, data);
});
},
findAll: function(store, type) {
var url = type.url, base = this;
jQuery.getJSON(url, function(data) {
// data is an Array of Hashes in the same order as the original
// Array of IDs. If your server returns a root, simply do something
// like:
var root = base.getKey(type);
// store.loadMany(type, ids, data.people)
var ids = data[root].map(function(item, index, self){ return item.id; });
store.loadMany(type, ids, data[root]);
});
},
findQuery: function(store, type, query, modelArray) {
var url = type.url, key = this.getKey(type);
jQuery.getJSON(url, query, function(data) {
// data is expected to be an Array of Hashes, in an order
// determined by the server. This order may be specified in
// the query, and will be reflected in the view.
//
// If your server returns a root, simply:
// ...