JSFiddle - React, Tailwind, and code Playground

by kristaps_petersons

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Here</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h2>Home</h2>
    <ul>
    {{#each num in numbers}}
        {{view Zik.NumberView numberBinding="num" class="super"}}
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="number">
        Number: {{number}} <br/>
        Num: {{num}} <br/>
        Content: {{content}}  <br/>
</script>

JavaScript

Zik = Ember.Application.create();
Zik.Store = DS.Store.extend({
  revision: 4,
  adapter: DS.fixturesAdapter
});

Zik.ApplicationController = Ember.Controller.extend();
Zik.ApplicationView = Ember.View.extend({
    templateName: 'application'
});
Zik.NumberController = Ember.Controller.extend({})
Zik.NumberView = Ember.View.extend({
    templateName: 'number',
    tagName: 'li'
});

Zik.HomeController = Ember.Controller.extend({
    numbers: function(){
        return this.get('content')
    }.property('content')
});
        
Zik.HomeView = Ember.View.extend({
    templateName: 'home'
});

var data = [1, 2, 3, 4, 5];

Zik.Router = Ember.Router.extend({
  location: 'hash',

  root: Ember.Route.extend({
    index: Ember.Route.extend({
        route: '/',
        connectOutlets: function(router, context) {
            var appController = router.get('applicationController');
            appController.connectOutlet('home', data);
        }        
    }),
    
    
  })
});
Zik.initialize();