Ember: Partial model loading vs waiting for complete model (http://jsfiddle.net/NQKvy/704/)

gistfile1.html

<style type="text/css">
body { font-family: "Helvetica Neue"; font-weight: 300; margin: 15px; font-color: dimgray; }
a { margin-right: 15px; }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
th { border-bottom: 1px solid darkgray; }
th, td { padding: 10px 15px 10px 0; }
</style>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Complete vs Progressive Model Loading</h1>
    
    {{link-to 'Complete' 'slow'}}
    {{link-to 'Progressive' 'fast'}}
    {{link-to 'Reset' 'index'}}
    
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="sample">
  <br/>
  <h2>Developer Profiles</h2>
  <table>
      <thead><th>Name</th><th>Age</th></thead>
      {{#each content}}
      <tr><td>{{firstName}}</td><td>{{age}}</td></tr> 
      {{/each}}
  </table>
    
  {{#each commit}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="loading">
    <div><br/>Loading ...</div>
</script>

<script type="text/javascript">
App = Ember.Application.create({});

App.Fixture = Ember.ArrayProxy.extend({
    init: function() {        
        this.set('content', [
            { firstName: 'Kris', lastName: 'Selden' }, 
            { firstName: 'Luke', lastName: 'Melia' },
            { firstName: 'Formerly Alex', lastName: 'Matchneer' }
        ]);
    },
    getAges: function() {
        return new Ember.RSVP.Promise(function(accept, reject) {
            setTimeout(function() {
                var content = this.get('content'),
                    set = Ember.set;
                
                for(var i=0;i<content.length;i++) {
                    set(content.objectAt(i), 'age', Math.ceil((Math.random()*50)));
                }
                
                accept(this);
            }.bind(this), 3000);
        }.bind(this));
    }
});

App.Router.map(function() {
    ['fast', 'slow'].forEach(function(route) { 
        // will be used to build out the nested routes
        this.resource(route);
    }.bind(this));
});

App.SlowRoute = Ember.Route.extend({
    model: function() {
        return App.Fixture.create({}).getAges();
    }
});

App.FastRoute = Ember.Route.extend({
    model: function() {
        var model = App.Fixture.create({});
        model.getAges();
        return model;
    }
});



App.SlowView = Ember.View.extend({ templateName: 'sample' });
App.FastView = Ember.View.extend({ templateName: 'sample' });

App.IndexRoute = Ember.Route.extend();
</script>