Question

I have a Base Router where i define some functions that need to be run everywhere. Every Router extends this Router.

Now my problem is, that none of my routes defined in this Base router, actually fire. Every other route in other Routers work fine. I have created a test route called ‘a’ which calls method ‘b’, which should fire an alert but nothing happens.

Here is the code: (This is Coffeescript, don’t pay attention to the indentation, it’s fine in my file)

class Etaxi.Routers.Base extends Backbone.Router

routes:
    'register' : 'registerDevice'
    'a' : 'b'

b: ->
    alert "a"

initialize: ->
    @registerDevice() unless localStorage.device_id?
    @getGeolocation()

registerDevice: ->
    @collection = new Etaxi.Collections.Devices()
    @collection.fetch()
    view = new Etaxi.Views.RegisterDevice(collection: @collection)
    $('#wrapper').append(view.render().el)

getGeolocation: ->
    navigator.geolocation.getCurrentPosition (position) ->
        lat = position.coords.latitude
        lng = position.coords.longitude
        #$('#apphead').tap ->
        #   alert 'Position: ' + lat + " ," + lng

So when i visit ‘/register’ or ‘/a’ it should fire the appropriate method but it does not. I wonder if it has something to do with the fact that other Router extend from this Router? Would be wired but it is the only thing i can think of because every other Router works fine.

Update

I think i have found a workaround by instantiating the Base Router in my main app .js file. This is what i do now:

new Etaxi.Routers.Base() (this is the new one)
new Etaxi.Routers.Videos()

Do you see any possible issues with this?

Answer 1

The problem is that extends won’t merge properties in your classes, the subclass’s properties will completely replace the superclass’s. For example, given these:

class Etaxi.Routers.Base extends Backbone.Router
    routes:
        'register' : 'registerDevice'
        'a' : 'b'

class R extends Etaxi.Routers.Base
    routes:
        'c': 'd'

Then the routes for an instance of R will be just 'c': 'd'. Here’s a demo with plain (non-Backbone) CoffeeScript classes: http://jsfiddle.net/ambiguous/ScUs2/

If you need to merge properties, you’ll have to do it yourself with something like this:

class M
    m: { a: 'b' }

class Pancakes extends M
    constructor: ->
        @m = _({}).extend(@m, a: 'B', c: 'd')

Demo: http://jsfiddle.net/ambiguous/SR6ej/

But that sort of trickery won’t work with Backbone.Router as the construction sequence is a bit different:

var Router = Backbone.Router = function(options) {
  options || (options = {});
  if (options.routes) this.routes = options.routes;
  this._bindRoutes();
  this.initialize.apply(this, arguments);
};

So the @routes need to be properly set up before initialize is called; that means that you can’t merge new routes into @routes in your initialize and expect them to be hooked up. Also, you probably don’t want to provide your constructor when using Backbone as you’d have to fully implement the standard Backbone.Router constructor and slip your extra stuff in the middle of it.

A couple options immediately present themselves:

1. Manually add the subclass’s routes by calling route in the subclasses initialize.
2. Leave the routes out of the base class, add a method to the base class that adds the base class’s routes using route calls, and then call that method in the subclass initialize method.

Another possible option would be to do something like this:

class R extends Backbone.Router
    routes:
        'a': 'b'

class RR extends R
    @::routes = _({}).extend(R::routes, 'c': 'd')

That should get you { 'a': 'b', 'c': 'd' } in the subclass’s routes at the right time; I haven’t fully tested this one but it does work in a simple demo: http://jsfiddle.net/ambiguous/QQbrx/

All the messing around might be pointless though. You can have as many routers as you want so subclassing might be wholly unnecessary. For example, this works just fine:

class R extends Backbone.Router
    routes:
        'a': 'b'
    b: -> console.log('b')

class RR extends Backbone.Router
    routes:
        'c': 'd'
    d: -> console.log('d')

new R
new RR
Backbone.history.start()

Demo: http://jsfiddle.net/ambiguous/mr83v/