Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h2>{{title}}</h2>
    {{length}}
    {{firstObject}}
  <ul>
  {{#each}}
      {{#if isFulfilled}}
        <li>{{content.firstName}} {{content.lastName}}</li>
      {{else}}
        <li>Loading...</li>
      {{/if}}
    {{/each}}
   </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

PromisedPerson = Ember.Object.extend(Ember.PromiseProxyMixin);

MyArray = Ember.Object.extend(Ember.Array, {
    length: 3,
    objectAt: function(i) {
        return this.promiseArray()[i];
    },
    promiseArray: function() {
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ].map(function(person) {
          return PromisedPerson.create({promise: Ember.RSVP.resolve(person)});
      });
    }
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return MyArray.create();
  }
});

App.IndexController = Ember.ArrayController.extend({
    title: "ArrayController go!"
});