JSFiddle - React, Tailwind, and code Playground

by krisselden

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/kselden/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>My app</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="data">
    Data:
    {{#each controller}}
        <p>{{name}}</p>
      {{/each}}
</script>

JavaScript

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

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

App.DataController = Em.ArrayController.extend({
    getData: function() {
        var dataArray = [
            {name:"name1", value:1},
            {name:"name2", value:2}
        ];
        return dataArray;
    }
});


App.DataView = Em.View.extend({ templateName: 'data' });

App.Router = Em.Router.extend({
    location: "none",
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                var dataController = router.get('dataController');
                router.get('applicationController').connectOutlet('data', dataController.getData());
            }
        })
    })
});

App.initialize();
});