1

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?

2 Answers 2

3

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/

2
  • Thank you very much for explaining the problem that detailed. I have updated my post above with a possible solution but i am not sure if it is a good way of doing it, maybe you can take a look.
    – Drazen
    Mar 21, 2012 at 23:35
  • @drale2k: I think I might have added an update similar to that while you were commenting. There's nothing wrong with having multiple routes, check the bottom of my updated answer. Even so, the @::routes = _(R::routes).extend('c': 'd') trick is sort of neat :) Mar 21, 2012 at 23:40
0

My CoffeeScript is rusty, but ... this looks off to me:

class Etaxi.Routers.Base extends Backbone.Router

Normally in JS you'd do:

Etaxi.Routers.Base = Backbone.Router.extend({
  ... // properties and methods of Etaxi.Routers.Base go here
});

Is your CoffeeScript equivalent? If not, that may be your problem.

2
  • CoffeeScript's class ... extends is fully compatible with Backbone's extends "subclassing". Mar 21, 2012 at 22:41
  • Ah. In that case, just as a debugging check (the routes property that you're using should work, but just so we can get more info ...), could you try hooking up your routes inside initialize, via: this.route('register', 'registerDevice', this.registerDevice) ? Mar 21, 2012 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.