Deferred template loading

Don't load a template until an async action is finished.

by Jeremy Gillick

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="index">
  Loading...
</script>
<script type="text/x-handlebars" data-template-name="loadedStuffs">
    Stuffs rendered
    {{foo}}
</script>
<script type="text/x-handlebars" data-template-name="failed">
    WTF?
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; }
li { border-bottom: 1px solid #333; padding: 5px 0; }

JavaScript

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

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller, model){
        var self = this;
        setTimeout(function(){
            if(true){
                controller.set('foo', 'bar');
                self.render('loadedStuffs', {'controller': controller});
            } else {
                self.render('failed');
            }
        }, 2000);
    }
});