JSFiddle - React, Tailwind, and code Playground

by pauldechov

HTML

<script src="http://cloud.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}}
</script>

<script type="text/x-handlebars" data-template-name="people">
    {{#each person in controller}}
        {{#with person}}
            {{view view.itemViewClass}}
        {{/with}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="person-item">
    <p>ID: {{id}}</p>
    <p>Name: {{name}}</p>
    {{#each tag in tags}}
        <p>Tag: {{tag.name}}</p>
    {{/each}}
</script>

JavaScript

App = Em.Application.create({});

App.Tag = DS.Model.extend({
    name: DS.attr('string')
});

App.Person = DS.Model.extend({
    name: DS.attr('string'),
    tags: DS.hasMany('App.Tag', { embedded: true })
});

App.Person.FIXTURES = [
    {
        "id": 1,
        "name": "Tom Dale",
        "tags": [{
          "id": 1,
          "name": "good-looking"
        },
        {
          "id": 2,
          "name": "not-too-bright"
        }]
    }
];

App.store = DS.Store.create({
    revision: 4,
    adapter: DS.FixtureAdapter.create({})
});


App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.PeopleController = Em.ArrayController.extend({});
App.PeopleView = Em.View.extend({
    templateName: 'people',
    tagName: 'ul',
    itemViewClass: Em.View.extend({
        templateName: 'person-item'
    })
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'none',

    root: Em.Route.extend({
        
        index: Em.Route.extend({
            route: '/',
            redirectsTo: 'people.index'
        }),
        
        people: Em.Route.extend({
            route: '/people',
                    
            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('people', App.Person.find());
                },
            })
        }),
        
    })
});

App.initialize();