EMBER WORKSHOP: Async Router w/ Nested Routes

by jdcravens

HTML

<script src="http://builds.emberjs.com/canary/ember.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Router</h1>
    {{outlet "namedoutlet"}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="indextemplate">
    <h1>index template</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="nested">
  <h2>Nested Content:</h2>
  <ul>
  {{#each model as |p|}}
      <li><span>{{p.name}}, </span><span>online: {{p.isOnline}}</span></li>
  {{/each}}
   </ul>
</script>
<script type="text/x-handlebars" data-template-name="loadingtemplate">
  <h2>loading......</h2>
</script>

JavaScript

var App = Ember.Application.create({
    //LOG_TRANSITIONS: true,
    //LOG_RESOLVER: true,
    //LOG_ACTIVE_GENERATION: true, // log whats being actively generated
    //LOG_MODULE_RESOLVER: true, 
    //LOG_TRANSITIONS: true,
    //LOG_TRANSITIONS_INTERNAL: true,
    //LOG_VIEW_LOOKUPS: true 
});
App.Router.map(function() {
    this.resource("index", {path: '/'}, function() {
       this.resource("nested");
    });
});

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render('indextemplate',{outlet: 'namedoutlet'}); 
    },
    beforeModel: function() {
      this.transitionTo('nested'); // fires before the model
    }
});

App.NestedRoute = Ember.Route.extend({
    
    beforeModel: function() {
      console.log('nested beforeModel'); // fires before the model
    },
 
    model: function(){
      return new Ember.RSVP.Promise(function(resolve){
        setTimeout(function(){ 
          var players = [
                Ember.Object.create({ name: 'CrafterJohn', isOnline: true }),
                Ember.Object.create({ name: 'MinerPaul', isOnline: true }),
                Ember.Object.create({ name: 'ExplorerRingo', isOnline: true })
                ];
            resolve(players);
        }, 1000);
      });
    },
    
    afterModel: function() {
      console.log('nested afterModel'); // fires after the model
    },
});

App.IndexLoadingRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render('loadingtemplate', {outlet: 'namedoutlet'}); 
    }
});