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="https://raw.github.com/gist/3937266/280491cae2e19b56ee19d3b2d013cb15a0b247bb/ember-data.js"></script>
<script type='text/x-handlebars'>
{{#each post in App.postsController}}
<div class="post">
<h3>{{post.title}}</h3>
<h4>by {{post.author.name}}</h4>
</div>
{{/each}}
</script>
CSS
.post {
background-color:#ccc;
margin: 0 auto;
width:80%;
margin-bottom:10px;
}
h3 {border-bottom:1px solid #aaa;margin-bottom:3px;}
h4 {font-size:small;}
JavaScript
// Create the application
App = Ember.Application.create();
// create the store
App.store = DS.Store.create({
revision: 6,
adapter: DS.RESTAdapter.create()
});
App.Tag = DS.Model.extend({
name: DS.attr("string")
})
App.Post = DS.Model.extend({
title: DS.attr("string"),
author: DS.belongsTo("App.Author"),
tags: DS.hasMany("App.Tag")
});
App.Author = DS.Model.extend({
name: DS.attr("string"),
posts: DS.hasMany("App.Post") // inverse assoc required.
});
// load records
// these could come from the server or be loaded when the
// store is created also.
App.store.load(App.Author, {id: 1, name: "Foo boy"});
App.store.loadMany(App.Post, [
{id: 1, title: "Post #1", author_id:1},
{id: 2, title: "Post #2", author_id:1},
{id: 3, title: "Post #3", author_id:1}
]);
App.postsController = Ember.ArrayController.create();
App.postsController.set('content', []);
App.postsController.pushObject(App.Post.find(1));
App.postsController.pushObject(App.Post.find(2));
App.postsController.pushObject(App.Post.find(3));