JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <ul>
        <li>{{#link-to 'film'}}Film{{/link-to}}</li>
        <li>{{#link-to 'tv'}}TV{{/link-to}}</li>
        <li>{{#link-to 'music'}}Music{{/link-to}}</li>
    </ul>
    {{outlet}}
</script>

JavaScript

App = Em.Application.create();

App.Router.map(function(){
    this.route('film', {path:'/film'});
    this.route('tv', {path:'/tv'});
    this.route('music', {path:'/music'});
});

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

App.FilmRoute = Ember.Route.extend({
    enter: function(){
        console.log("entering film");
    },
    exit: function(){
        console.log("exiting film");
    }
});
App.TvRoute = Ember.Route.extend({
    enter: function(){
        console.log("entering Tv");
    },
    exit: function(){
        console.log("exiting Tv");
    }
});
App.MusicRoute = Ember.Route.extend({
    willExit: function() { console.log("willExit"); return Ember.RSVP.resolve(); },
    willEnter: function() { return Ember.RSVP.resolve(); },
    enter: function(){
        console.log("entering Music");
    },
    exit: function(){
        var route = this;
        promise = new Em.RSVP.Promise(function(resolve, reject){
            Em.run.later(this, function(){
                console.log("in later", resolve);
                return resolve;
                //return route._super.apply(route, arguments);
                /*
                route.willExit().then(resolve).then(function(){
                    route._super.apply(route, arguments);
                });
                */
            }, 2000)
        });
        return promise();
        //this._super.apply(this, arguments);
        
    }
});