JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<script src="http://dl.dropbox.com/u/716525/content/emberv2/handlebars-1.0.rc.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://files.pinkhearted.com/ember.min.js"></script>
<script src="http://files.pinkhearted.com/ember-data.js"></script>
<script type="text/x-handlebars">
    <div class="navbar navbar-static-top">
        <div class="navbar-inner">
            <a class="brand" href="#/"><i class="icon-fire" style="vertical-align:middle;"></i></a>
            <ul class="nav">
                <li><a href="#/events">Events</a></li>
            </ul>
        </div>
    </div>
    {{outlet}}
    <footer>Footer</footer>
</script>
<script type="text/x-handlebars" data-template-name="index">
    Hello
</script>
<script type="text/x-handlebars" data-template-name="events">
    {{#each event in content}}
        <h2>{{item.type}}</h2>
        <div>{{item.id}}</div>
    {{/each}}
</script>

JavaScript

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

App.store = DS.Store.create({
    revision: 11,
    adapter: DS.RESTAdapter.create({
        bulkCommit: false,
        url: 'https://api.github.com',
        mappings:{
            events: 'App.Event'
        }
    })
});

App.Event = DS.Model.extend({
    "type": DS.attr('string'),
    "created_at": DS.attr('date'),
    "public": DS.attr('boolean'),
});

App.Router.map(function(match) {
    match('/').to('index');
    match('/events').to('events');
});

App.EventsRoute = Ember.Route.extend({
    model: function(params) {
        return App.Event.find();
    }
});

App.IndexController = Ember.ArrayController.extend();
App.EventsController = Ember.ArrayController.extend();