I'm not 100% sure I understood you correctly. If I didn't please let me know in the comments.
There seems to be some confusion in your question regarding the usage of Backbone.Router
in general. When the router maps a route to URL fragment #contacts
, that has nothing to do with a DOM element with the id #contacts
. The hash sign simply happens to be the identifier for an URL fragment and id
CSS selector, but that's where the similarity ends.
Typically my router looks something like this:
var AppRouter = Backbone.Router.extend({
routes: {
contacts: "contactList"
},
contactList: function() {
var contacts = new ContactCollection();
var view = new ContactListView({collection:contacts});
view.render().$el.appendTo("#contacts");
}
});
Notice that the #contacts
element doesn't need to be called that. You can call it #pony
, or you can render the view directly to the document body
if you want.
So in these terms the workflow is:
- Router gets hit
- Collection is initialized
- View is rendered