JSFiddle - React, Tailwind, and code Playground

by davidpett

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/u/1640776/libs/bootstrap.min.css">
<script src="https://dl.dropbox.com/u/1640776/libs/handlebars.js"></script>
<script src="https://dl.dropbox.com/u/1640776/libs/ember.js"></script>
<script src="https://dl.dropbox.com/u/1640776/libs/ember-data.js"></script>
<script type="text/x-handlebars">
    <nav class="navbar navbar-fixed">
        <div class="navbar-inner">
            <div class="container-fluid">
                <ul class="nav">
                    <li>{{#linkTo 'posts'}}posts{{/linkTo}}</li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row-fluid">
            {{outlet}}
        </div>
    </div>
</script>

<script type="text/x-handlebars" id="posts">
    <div class="span3">
        <div class="well sidebar-nav">
            <ul class="nav nav-list">
            {{#each model}}
                <li>{{#linkTo 'post' this}}{{title}}{{/linkTo}}</li>
            {{/each}}
            </ul>
        </div>
    </div>
    <div class="span9">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="posts/index">
    Select a Post
</script>

<script type="text/x-handlebars" id="post">
    <h1>{{title}}
</script>

JavaScript

'use strict';
/*global App:true, DS:true, Ember:true */

window.App = Ember.Application.create();

App.Store = DS.Store.extend({
	revision: 11,
	adapter: 'DS.FixtureAdapter'
});

App.Router.map(function() {
	this.resource('posts', function() {
		this.resource('post', {path: ':post_id'});
	});
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('posts');
    }
});

App.PostsRoute = Ember.Route.extend({
	model: function() {
		return App.Post.find();
	}
});

App.Post = DS.Model.extend({
	title: DS.attr('string')
});

App.Post.FIXTURES = [{
	id: 1,
	title: 'Some crazy stuff going on'
}, {
	id: 2,
	title: 'That is Pretty Lame'
}];