Trek Ember tutorial

by mrmartineau

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://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="contributor-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>

JavaScript

App = Ember.Application.create();

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

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

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

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

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

    $.ajax({
      url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
      dataType: 'jsonp',
      context: contributor,
      success: function(response){
        this.setProperties(response.data.filterProperty('login', username));
  ...