JSFiddle - React, Tailwind, and code Playground

by davidpett

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Committers</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="contributors">
    {{#each person in controller}}
        <a {{action showContributor person}}> {{person.login}} </a>
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="a-contributor">
    <div>
        <a {{action showAllContributors}}>All Contributors</a>
    </div>
    {{login}} - {{contributions}} contributions to Ember.js
    
    <ul>
        <li><a {{action showDetails}}>Details</a></li>
        <li><a {{action showRepos}}>Repos</a></li>
    </ul>
    
    <div>
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="details">
    <p>{{email}}</p>
    <p>{{bio}}</p>
</script>

<script type="text/x-handlebars" data-template-name="repos">
    {{#each repo in repos}}
        {{repo.name}}
    {{/each}}
</script>

CSS

a {
    color: blue;
}

JavaScript

App = Ember.Application.create();


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


App.AllContributorsView = Ember.View.extend({
    templateName: 'contributors'
});
App.AllContributorsController = Ember.ArrayController.extend();


App.OneContributorView = Ember.View.extend({
    templateName: 'a-contributor'
});
App.OneContributorController = Ember.ObjectController.extend();

App.DetailsView = Ember.View.extend({
    templateName: 'details'
});

App.ReposView = Ember.View.extend({
    templateName: 'repos'
});


App.Contributor = Ember.Object.extend();
App.Contributor.reopenClass({
    allContributors: [],
    find: function(){
        var contributors = this.allContributors;
        $.ajax({
            url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
            dataType: 'jsonp',
            success: function(response){
                contributors.addObjects(response.data);
            }
        });
        return contributors;
    },
    findOne: function(username){
        var obj = this,
            contributor = App.Contributor.create({
            login: username
        });
        $.ajax({
            url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
            dataType: 'jsonp',
            context: contributor,
            success: function(response){
                obj.setProperties(response.data.filterProperty('login', username));
            }
        });
        return contributor;
    },
    loadMoreDetails: function(){
        var obj = this,
            login = obj.get('login');
        $.ajax({
            url: 'https://api.github.com/users/%@'.fmt(login),
            context: this,
            dataType: 'jsonp',
            success: function(response){
                obj.setProperties(response.data);
            }
        });
    },
    loadRepos: function(){
        var obj = this,
            login =...