Ember.js Article

http://trek.github.com/

by Hari Menon

HTML

<script src="https://raw.github.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Committers</h1>
    {{outlet}}
</script>

<!-- in your page body or head: -->
<script type="text/x-handlebars" data-template-name="contributors">
  {{#each person in controller}}
    {{person.login}}
  {{/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: '/',
            connectOutlets: function (router) {
                console.log('here');
                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) {
                    this.allContributors.addObject(App.Contributor.create(contributor))
                }, this)
            }
        })
        return this.allContributors;
    }
});