JSFiddle - React, Tailwind, and code Playground

by lcoq

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/latest-builds/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div>
    <ul>
        <li>{{#linkTo "home"}}Home{{/linkTo}}</li>
        <li>{{#linkTo "sections"}}Sections{{/linkTo}}</li>
        <li>{{#linkTo "items"}}Items{{/linkTo}}</li>
   </ul>
</div>

<div>
  {{outlet}}
</div>

</script>


<script type="text/x-handlebars" data-template-name="home">
    <h1>Home</h1>
</script>

<script type="text/x-handlebars" data-template-name="sections">
    <h1>Sections</h1>
</script>

<script type="text/x-handlebars" data-template-name="items">
    <h1>Items Page</h1>
</script>

JavaScript

App = Ember.Application.create()

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

    App.HomeRoute = Ember.Route.extend({
        setupController: function (controller) {
            this._super.apply(this, arguments);
            var t = setInterval(function () {
                console.log('my timer', new Date());
            }, 2000);
            controller.set('timer', t);
        },
        enter: function () {
            console.log('home entered');
        },
        exit: function () {
            console.log(this.controller);
            console.log('home exited', arguments, this);
            //here i want to clear the interval
        }
    });
    App.HomeController = Ember.Controller.extend({
        timer: null
    });
    App.HomeView = Ember.View.extend({

    });

    App.SectionsRoute = Ember.Route.extend({
        setupController: function (controller) {
            this._super.apply(this, arguments);
            //do stuff..
        },
        enter: function () {
            console.log('sections entered');
        },
        exit: function () {
            console.log('sections exited');
        }
    });
    App.SectionsController = Ember.Controller.extend();
    App.SectionsView = Ember.View.extend({
        templateName:'sections'
    });

    App.ItemsRoute = Ember.Route.extend({
        setupController: function (controller) {
            this._super.apply(this, arguments);
            //do stuff..
        },
        enter: function () {
            console.log('items entered');
        },
        exit: function () {
            console.log('items exited');
        }
    });
    App.ItemsController = Ember.Controller.extend();
    App.ItemsView = Ember.View.extend({
        templateName:'items'
    });

    App.Router.map(function(){
        this.route('home', {path: '/'});
        this.route('sections');
       ...