I am separating my views and router into separate files with require. I then have a main.js file that instantiates the router, and also renders my default view.
My router has view ('View/:id') and edit ('Edit/:id') as routes. In main.js, when I instantiate the router, I can hardcode router.navigate('View/1', true) and the navigation works fine. In my view file, when I click on the edit link, I want to call router.navigate('View/' + id, true), but I'm not sure how I should do this.
I've had success calling Backbone.history.navigate('View/' + id, true), but I don't feel like I should be relying on the global Backbone object.
I tried passing ({ router: appRouter }) to my views so I could use this.options.router.navigate(), however that wasn't working for me.
In case you're curious, here's a bunch of code from my app:
Router:
define(['./View', './Edit'], function (View, Edit) {
return Backbone.Router.extend({
routes: {
'View/:id': 'view',
'Edit/:id': 'edit'
},
view: function (id) {
var model = this.collection.get(id);
var view = new View({ model: model });
view.render();
},
edit: function (id) {
var model = this.collection.get(id);
var edit = new Edit({ model: model });
edit.render();
}
});
});
View:
define(function () {
return Backbone.View.extend({
template: Handlebars.compile($('#template').html()),
events: {
'click .edit': 'edit'
},
render: function () {
//Create and insert the cover letter view
$(this.el).html(this.template(this.model.toJSON()));
$('#View').html(this.el);
return this;
},
edit: function () {
Backbone.history.navigate('Edit/' + this.model.id, true);
},
});
});
Best Answer
In case anyone else is looking for a solution to this problem like I was, I'm posting what I ended up doing. If you're using the boilerplate backbone.js, then you will have an
initialize()
function inrouter.js
. I modified myinitialize()
function to look like the following:Due to backbone.js's particular flavour of inheritance, this allows allows me to call
MyView.goTo(location);
from within any of my views.