Marionette js routing - What am I doing wrong here? I'm getting error that route actions are undefined?

Question

Just want to get some basic routing up and going. Having seen a number of examples I thought the code below should work, but when I run I get the error "Unable to get property 'doChat' of undefined or null reference". Do I have the initialization sequence wrong?

    require(["marionette", "jquery.bootstrap", "jqueryui"], function (Marionette) {
        window.App = new Marionette.Application();

        App.start();

        App.addRegions({
        //add some regions here
        });

        //Set up routing       
        var AppRouter = Marionette.AppRouter.extend({
            appRoutes: {
                "": "doDefault",
                "chat": "doChat"
            },

            doDefault: function () {
                alert("doing default...")
            },
            doChat: function () {
                alert("doing chat...")
            }
        });

        var router = new AppRouter();

        //History
        if (Backbone.history) {
            Backbone.history.start();
        }
    })

Answer 1

The AppRouter allows two types of routes, standard backbone routes as defined in the routes property and routes which call functions in another object defined in the appRoutes property.

So to get you above code working, you can do one of two things. The quickest is simply to change the appRoutes property to routes which will do normal backbone routing. The second option is to create another object and pass that to the AppRouter as the controller during instantiation:

var myController = {
    doDefault: function () {
        alert("doing default...")
    },
    doChat: function () {
        alert("doing chat...")
    }
}

var router = new AppRouter({
    controller: myController
});

This is detailed in the AppRouter documentation.