Управление представлениями с помощью роутера, backbone.js

У меня проблема с моим backbone.js-приложением, я хочу контролировать, какой subviev выполняется с помощью базового маршрутизатора, но у меня проблемы с пространствами имен. Я получаю сообщение об ошибке "Uncaught ReferenceError: приложение не определено", и все другие решения я пробовал там, где это не удалось. Может быть лучшее решение для управления просмотром с маршрутизатором, но я пробовал другое решение в течение 3 часов без успеха. Я надеюсь, что вы можете мне помочь.

Вот мой код:

(function($){    


var App = Backbone.View.extend({
    el: $('body'),

    initialize: function () {
        _.bindAll(this, 'render');
        this.mainApp = new LoginApp();
        this.render();
    },

    render: function(){
        $(this.el).append(this.mainApp.render().$el);
    },
    setmainApp: function(mApp) {
        this.mainApp = mApp;
    }
});

var LoginApp =Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
    },

    render: function() {
        $(this.el).append("<h1>Hello World</h1>");
        return this;    
    }
});

var RegisterApp =Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
    },

    render: function() {
        $(this.el).append("<h1>Hello World2</h1>");
        return this;    
    }
});


//Router
var AppRouter =Backbone.Router.extend({
    routes : {
        "login" : "login",
        "register": "register",
        '*path':  'defaultRoute'
    },
    login: function() {
        //Problem
        app.setmainApp(new LoginApp);
        app.render();
    },
    register: function() {
        app.setmainApp(new RegisterApp);
        app.render();
    },
    defaultRoute: function() {
        app.setmainApp(new LoginApp);
        app.render();
    }
});
var appRouter = new AppRouter;
Backbone.history.start();
app = new App();

})(jQuery);