Backbone.Marionette: Router Not Routing Correctly

Question

So I have a button in my landing page view that, when clicked, should route my user to the register URL, initiate my register function in my router, and render the register view. The only problem is that it seems to be routing incorrectly.

Here's my landing-page view:

template = require './templates/landing'
app = require '../application'

module.exports = class LandingView extends Backbone.Marionette.ItemView
    id: 'landing-view'
    template: template

    events:
        'click .splash .get-started': 'route_register'

    route_register: (e) ->
        e.preventDefault()
        console.log 'button clicked'
        app.router.navigate('/register', {trigger: true})

and here's my router:

application = require('application')
HomeView = require('views/HomeView')
LandingView = require('views/LandingView')
RegisterView = require('views/RegisterView')

module.exports = class Router extends Backbone.Router

    routes:
        '': 'landing'
        '/home': 'home'
        '/register': 'register'

    landing: =>
        console.log 'in router: landing'
        lv = new LandingView()
        application.layout.content.show(lv)

    home: =>
        console.log 'in router: home'
        hv = new HomeView()
        application.layout.content.show(hv)

    register: =>
        console.log 'in router: register'
        rv = new RegisterView()
        application.layout.content.show(rv)

In my landing-page view, when the button is clicked, I get the console.log in chrome tools. But I never get the console.logs from the router. This led me to believe that my router was instantiated incorrectly but here's how I do it:

class Application extends Backbone.Marionette.Application
    initialize: =>

        @on("initialize:after", (options) =>
            Backbone.history.start();
            # Freeze the object
            Object.freeze? this
        )

        @addInitializer( (options) =>
            # Instantiate the main layout
            AppLayout = require 'views/AppLayout'
            @layout = new AppLayout()
            @layout.render()
        )

        @addInitializer((options) =>
            # Instantiate the router
            Router = require 'lib/router'
            @router = new Router()
        )

Also, the address chanages in the URL bar, for example, when I click the landing-page button the URL changes from localhost:3000 to localhost:3000/register, yet I don't get the console.log in the router and the page doesn't render.

Could anyone help me pin down this bug?

Answer 1

An hour of debugging and it's.... a dumb typo error.

If you include a / in front of your routes object in Backbone.Router routing will not work correctly. I removed the forward slashes and everything works.

Incorrect routes:

routes:
    '/': 'landing'
    '/home': 'home'
    '/register': 'register'

Correct routes:

routes:
    '': 'landing'
    'home': 'home'
    'register': 'register'