SO - Backbone - view not shown

http://stackoverflow.com/q/8554489/1011582

by dzejkej

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="content-pane"></div>

JavaScript

var templates = {
    
    loading: 'Loading ...',
    
    welcome: 'Welcome! Today is <%= date %>'
};

var WelcomeView = Backbone.View.extend({

    el: '#content-pane',

    template: _.template(templates.welcome),

    initialize: function() {
        _.bindAll(this, 'render');
        this.renderLoading();
        setTimeout( _.bind(function() { this.render(); }, this), 3000);
    },

    renderLoading: function() {
        $(this.el).html(_.template(templates.loading)());
    },

    render: function() {
        $(this.el).html(this.template({ date: new Date() }));
    }
    
});

var AppRouter = Backbone.Router.extend({

    contentView: null,

    routes: {
        'welcome': 'welcomeAction'
    },

    initialize: function () {
        this.navigate('welcome', true);
    },
    
    welcomeAction: function () {
        var view = new WelcomeView();
    }
    
});

function App() {

    this.router = null;

    this.initialize = function () {
        this.router = new AppRouter();
        Backbone.history.start();
    };
    
}

var reader = new App();
reader.initialize();