Now, to render our controls, we need to start building our router. We have created a router.js file, so let's open that up, as follows:
var AppRouter = Backbone.Router.extend({
initialize: function (options) {
this.main = options.main;
this.events = options.events;
this.nav = this.navigate.bind(this);
},
routes: {
'': 'index'
},
index: function () {
var cv = new ControlsView({
nav: this.nav
});
this.main.html(cv.render().el);
}
});From our initialize function, we can see that we expect to get our main element and an Events collection as properties of our options object. We're also creating a nav property; this is the nav method that we saw in ControlsView. It's important to realize that we can't just send this.navigate; we need to make sure that the function is bound to the router object, which we do with its bind method. When we bind a function in this way, we're creating a copy of the function whose value of this (inside...