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({
    enter: function(){
        console.log("entering Music");
    },
    exit: function(){
        console.log("exiting Music");
        var promise = new Promise(function(resolve, reject) {
            console.log("in the promise");
            // on success
            
            
            // on failure
            //reject(reason);
        });
        Em.run.later(this, function(resolve){
            console.log("resolving exit");
            resolve();
        }, 2000);
        return promise();
    }
});