Ember,js

by mickeyvip

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://s3.amazonaws.com/github/downloads/emberjs/ember.js/ember-1.0.pre.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">
    <p>Total: {{ total }}</p>
  {{#each person in controller}}
    {{person.login}}
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="contributors">
  {{#each person in controller}}
    <a {{action showContributor person}}> {{person.login}} </a>
  {{/each}}
</script>

JavaScript

App = Ember.Application.create();

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

App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      showContributor: Ember.Route.transitionTo('aContributor'),
      connectOutlets: function(router){
          router.get('applicationController').connectOutlet('allContributors', App.Contributor.find());
      }
    })
  })
});

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

App.Contributor = Ember.Object.extend();
App.Contributor.reopenClass({
  allContributors: [],
  find: function(){
    $.ajax({
      url: 'https://api.github.com/repos/emberjs/ember.js/contributors',
      dataType: 'jsonp',
      context: this,
      success: function(response){
          
        response.data.forEach(function(contributor){
            console.log(contributor);
            var obj = App.Contributor.create(contributor);
            this.allContributors.addObject(obj );
        }, this);
        return this.allContributors;
      }
    })          
  },
    aContributor: Ember.Route.extend({
      route: '/:githubUserName',
      connectOutlets: function(router, context){
        router.get('applicationController').connectOutlet('oneContributor', context);
      }
    })
});
          
App.initialize();