JSFiddle - React, Tailwind, and code Playground

by andremalan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.2/handlebars.min.js"></script>
<script src="https://gist.github.com/devincrossman/4700186/raw/8d5ef7b5b5353e128ecbcf4f0b9cc056803a4113/ember.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="bands/index">
    <h2>Bands Index</h2>
    {{#linkTo bands.new}}New Band{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="bands">
    <h1>Bands</h1>
    <p>
      {{#linkTo index}}Start Again{{/linkTo}}
      {{#linkTo bands.new}}New Band{{/linkTo}}
    </p>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="bands/new">
    I'm in new band!
    <a {{action "cancel"}}>Cancel</a>
</script>

JavaScript

var App = Ember.Application.create();

App.Router.map(function() {
    this.resource('bands', function() {
        this.route('new');
    });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('bands');
  }
});

App.BandsNewController = Ember.Controller.extend({
    cancel: function() {
        this.transitionTo('bands');
    }
});