Ember - Simple 3 views with visit counts

by amindunited

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application top
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h1>Home</h1>
    <div>Number of visits {{view.numVisits}}</div>
    {{#linkTo 'second'}}GoTo Second Page{{/linkTo}}
    <br/>
    {{#linkTo 'third'}}GoTo Third Page{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="second">
    <h1>Second Page</h1>
    <div>{{view.numVisits}} visits to the second page</div>
    {{#linkTo 'home'}}GoTo Home Page{{/linkTo}}
    <br/>
    {{#linkTo 'third'}}GoTo Third Page{{/linkTo}}
    
</script>
<script type="text/x-handlebars" data-template-name="third">
    <h1>Third Page</h1>
    <div>{{view.numVisits}} visits to the third page</div>
    {{#linkTo 'home'}}GoTo Home Page{{/linkTo}}
    <br/>
    {{#linkTo 'second'}}GoTo Second Page{{/linkTo}}
    
</script>

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({});
App.Router.map (function(){
    this.route('home', {path: '/'});
    this.route('second', { path: '/second' });
    this.route('third', { path: '/third' });
});
App.HomeRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('home');
    }
});

App.SecondRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('second');
    }
});

App.ThirdRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('third');
    }
});
App.Home = Em.Object.create({
    numVisits:0
});
App.HomeController = Em.Controller.extend();
App.HomeView = Em.View.extend({
    numVisitsBinding: 'App.Home.numVisits',
    templateName: "home",
    init: function(){
        //Call super here to invoke the init function of the Class
        //...although it's easier just to avoid using init in views,
        //...It's best to use did insert element
        console.log('Home view init');
        return this._super();
    },
    didInsertElement: function(){
        //Get the number of visits and increase by one
        var thisVisit = this.get('numVisits') + 1;
        this.set('numVisits', thisVisit)
    }
    
});

App.Second = Em.Object.create({
    numVisits:0
});
App.SecondController = Em.Controller.extend();
App.SecondView = Em.View.extend({
    numVisitsBinding: 'App.Second.numVisits',
    templateName: "second",
    init: function(){
        //Call super here to invoke the init function of the Class
        //...although it's easier just to avoid using init in views,
        //...It's best to use did insert element
        console.log('Second view init');
        return this._super();
    },
    didInsertElement: function(){
        //Get the number of visits and increase by one
        var thisVisit = this.get('numVisits') + 1;
        this.set('numVisits', thisVisit)
    }
    
});

App.Third =...