Route onload

The latest build of Ember.

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">
    <h2>Index Template</h2>
    <p>
        Loaded: {{loadNum}} time(s)
    </p>
    <p>
      {{#linkTo 'first'}}First{{/linkTo}}
    </p>
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" data-template-name="first">
    <h1>First Page</h1>
    <p>
        Loaded: {{loadNum}} time(s)
    </p>
    <p>
      {{#linkTo 'second'}}Goto second{{/linkTo}}
    </p>
</script>
<script type="text/x-handlebars" data-template-name="second">
    <h1>Second Page</h1>
    <p>
        Loaded: {{loadNum}} time(s)
    </p>
</script>

CSS

body { padding: 10px; }
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; }
p { margin: 7px 0; }

JavaScript

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

App.Router.map(function(){
    this.route('first');
    this.route('second');
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller){
        controller.onload();
    }
});

App.FirstRoute = Ember.Route.extend({
    setupController: function(controller){
        controller.onload();
    }
});
App.SecondRoute = Ember.Route.extend({
    setupController: function(controller){
        controller.onload();
    }
});

App.IndexController = Ember.ObjectController.extend({
    content: {loadNum: 0},
    onload: function(){
        alert('loaded - index');
        this.set('loadNum', this.get('loadNum') + 1);
    }
});
App.FirstController = Ember.ObjectController.extend({
    content: {loadNum: 0},
    onload: function(){
        alert('loaded - first');
        this.set('loadNum', this.get('loadNum') + 1);
    }
});
App.SecondController = Ember.ObjectController.extend({
    content: {loadNum: 0},
    onload: function(){
        alert('loaded - second');
        this.set('loadNum', this.get('loadNum') + 1);
    }
});