JSFiddle - React, Tailwind, and code Playground

by rushi

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.2.js"></script>
<script type="text/x-handlebars" data-template-name="application">  
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "contributors"}}Contributors{{/linkTo}}
    </nav>
    <div style='padding:5px;margin:5px;border:1px dotted red;'>
        Default Outlet
        {{outlet}}
    </div>
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>    
        modalOutlet
        {{outlet modalOutlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="contributors">
    <ul>
    {{#each contributor in controller}}
        <li>{{#linkTo contributor contributor}} {{contributor.login}} {{/linkTo}}</li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="contributor">
    <p>
        Contributor: {{login}}<br>
        Contributions: {{contributions}}
        <div style='clear:both;'></div>
    </p>
</script>

JavaScript

var App = Ember.Application.create();

// Router
App.Router.map(function(){
    this.route('contributors');
    this.route('contributor', {path: '/contributors/:contributor_id'});
});

// Route
App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        this.transitionTo('contributors');
    }
});


App.ContributorsRoute = Ember.Route.extend({
    model: function() {
        return App.Contributor.all();
    },
});

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});


// Fetch the data from Github Api
App.Contributor = Ember.Object.extend();
App.Contributor.reopenClass({
    allContributors: [], // class variable
    all: function() {
        this.allContributors = [];
        $.ajax({
            url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
            dataType: 'jsonp',
            context: this,
            success: function(response) {
                response.data.forEach(function(contributor) {
                    this.allContributors.addObject(App.Contributor.create(contributor))
                }, this);
            }
        });

        return this.allContributors;
    }
});