JSFiddle - React, Tailwind, and code Playground

by mehulkar

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/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<ul>            
  {{#each item in content}}
    <li {{action routerLog item}}>
        <span {{action controllerLog item target="controller"}}>
            Click me
        </span>
    </li>
  {{/each}}
</ul>
</script>

CSS

span {background-color:#ccc; cursor:pointer; padding:3px;}
li { margin:0 0 10px; }

JavaScript

MyApp = Ember.Application.create({
  autoinit: false
});

MyApp.router = Ember.Router.create({
  root: Ember.Route.extend({
    routerLog: function(e) {console.log('router action');},
    index: Ember.Route.extend({
      route: '/'
    })
  })
});

MyApp.ApplicationController = Ember.Controller.extend({
  content: ['a', 'b', 'c'],
    controllerLog: function(e) {console.log('controller action');}
});

MyApp.initialize(MyApp.router);