EMBER WORKSHOP: Async Router part 2
beforeModel, afterModel
by jdcravens
HTML
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<h1>Router</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>index template</h1>
<ul>
{{#each}}
<li><span>{{name}}, </span><span>online: {{isOnline}}</span></li>
{{/each}}
</ul>
</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
});
// Active Generation of Router
App.IndexRoute = Ember.Route.extend({
beforeModel: function() {
console.log('nested beforeModel'); // fires before the model
},
model: function(){
return [
Ember.Object.create({ name: 'CrafterJohn', isOnline: true }),
Ember.Object.create({ name: 'MinerPaul', isOnline: true }),
Ember.Object.create({ name: 'ExplorerRingo', isOnline: true })
];
},
changeme: function(){
return new Ember.RSVP.Promise(function(resolve){
var model = [
Ember.Object.create({ name: 'CrafterJohn', isOnline: true }),
Ember.Object.create({ name: 'MinerPaul', isOnline: true }),
Ember.Object.create({ name: 'ExplorerRingo', isOnline: true })
]
resolve(model);
});
},
changemetwo: function(){
return new Ember.RSVP.Promise(function(resolve){
setTimeout(function(){
var model = [
Ember.Object.create({ name: 'CrafterJohn', isOnline: true }),
Ember.Object.create({ name: 'MinerPaul', isOnline: true }),
Ember.Object.create({ name: 'ExplorerRingo', isOnline: true })
]
resolve(model);
}, 3000);
});
},
afterModel: function() {
console.log('nested afterModel'); // fires after the model
}
});