How to fix Routing in Marionette when using Browserify

[Alex Arshavski]

Hi,

I have a Marionette project and I try to make it work with Browserify. My app.js:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
Marionette = require('backbone.marionette');

var Controller = require("./controller");
var Router = require("./routes");

var App = new Marionette.Application();

...

App.addRegions({
    header: "#header_region",
    side_menu: "#side_menu_region",
    main: "#main_region",
    footer: "#footer_region"
});

...

var controller = new Controller({});

App.addInitializer(function(options){
    ...
    var router = new Router({
        controller : controller
    });
});

App.on("start", function(){
    Backbone.history.start();
});

App.start({});

module.exports = App;

My controller.js:

var headerView = require('./header/view');
var sideMenuView = require('./side_menu/view');

module.exports = function() {
    var Controller = Marionette.Controller.extend({
        showHome: function(){
            var header_view = new headerView();
            App.header.show(header_view);
            var side_menu_view = new sideMenuView();
            App.side_menu.show(side_menu_view);
        }
    });
    return Controller;
}

My routes.js:

module.exports = function() {
    var Route = Marionette.AppRouter.extend({
        appRoutes: {
            '': 'showHome'
        }
    });
    return Route;
}

My browserify command: browserify app.js -o bundle.js

For some reason, I can't get into my showHome function inside the controller. So when I go to my site, I get an empty page without any errors in the console.

Does anybody know what am I missing?

Thanks, Alex

[Dmitry Brin]

The Router needs its own "controller". Basically an object that contains your methods triggered by routes. Like this:

var Route = Marionette.AppRouter.extend({
        appRoutes: {
            '': 'showHome'

        }, 

       controller:{ showHome: function(){...}}

    });

controller:

[Joanne Daudier]

Any difference if you did this?

module.exports = Marionette.Controller.extend({

[Joanne Daudier]

I also noticed that you're missing a var in 

var Marionette = require('backbone.marionette');

And in your controller, it seems like you're not requiring the App in but you're using it.

On Thursday, November 6, 2014 6:24:40 AM UTC-5, Alex Arshavski wrote:

[Joanne Daudier]

Alex: come on Gitter and ask your Marionette questions here:  

https://gitter.im/marionettejs/backbone.marionette

On Thursday, November 6, 2014 6:24:40 AM UTC-5, Alex Arshavski wrote: