0

I work on an app with Marionette and browserify. When I start my application, any routes is matched.

My app code :

app.js :

var App = require('./App/SaApp.js');
App.start();

SaApp.js :

var Mn = require('backbone.marionette');
var DashboardRouter = require('./modules/DashboardRouter.js');
var DashboardController = require('./modules/DashboardController.js');
var DashboardMainView = require('./modules/Dashboard/layout/DashboardMainView.js');
var Backbone = require('backbone');

var app = new Mn.Application();

app.addInitializer(function () {

    console.log ('addInitializer');

    var dashboardMainView = new DashboardMainView({
        el: '#main-view'
    });

    var dashboardRouter = new DashboardRouter({
        controller: new DashboardController({
            mainView: dashboardMainView
        })
    });

    dashboardMainView.render();

});

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

module.exports = app;

DashBoardRouter.js file :

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

var DashboardRouter = Mn.AppRouter.extend({
    initialize : function () {
        console.log ('router')
    },
    appRoutes: {
        "": "indexAction",
        "databases/:name":'databaseAction'
    },
});

module.exports = DashboardRouter;

And DashBoardController.js :

var Mn = require('backbone.marionette');
var _ = require('underscore');
var LeftPanelView = require('./Dashboard/views/LeftPanelView.js');
var MainPanelView = require('./Dashboard/views/MainPanelView.js');
var TablePanelView = require('./TableBoard/views/TablePanelView.js');
var TableCollection = require('./Dashboard/collection/DatabaseCollection.js');
var DatabaseModel = require('./Dashboard/model/DatabaseModel.js');

var DashboardController = Mn.Controller.extend({

    initialize : function(options) {
        this.mainView = options.mainView;
        console.log ('init')
    },

    indexAction : function() {

        var collection = new TableCollection();

        console.log ('fetch')
        collection.fetch().done(_.bind(function () {
            this.mainView.leftPanel.show(new LeftPanelView({
                tableCollection : collection
            }));

            this.mainView.mainPanel.show(new MainPanelView());
        }, this));
    },

    databaseAction : function (tableName) {
        var databaseModel = new DatabaseModel();
        databaseModel.urlRoot = 'databases/'+tableName;

        databaseModel.fetch().done(_.bind(function() {
            var tablePanelViews = new TablePanelView({
                model : databaseModel
            });

            this.mainView.mainPanel.show(tablePanelViews);
        }, this));
    },

    onRoute : function() {
        var collection = new TableCollection();
        console.log ('on route')

        collection.fetch().done(_.bind(function () {
            this.mainView.leftPanel.show(new LeftPanelView({
                tableCollection : collection
            }));
        }, this));
    }

});

module.exports = DashboardController;

When I start my app, all console.log are displayed in good order but indexAction is never run. When I build code by browserify command, all is correct.

Thank you for your help.

amiceli
  • 437
  • 5
  • 11
  • 29

1 Answers1

0

I'm not sure, but i think you are just missing the controller (controller: myController) in the Approuter. As marionette documentation says:

var MyRouter = new Marionette.AppRouter({
  controller: myController,
  appRoutes: {
    "foo": "doFoo",
    "bar/:id": "doBar"
  }
});

I know i shoudn't post links on stackoverflow, but anyway it might help you. I have done recently a basic setup with marionette and require. There you might can understand better why is not working in your case:

https://github.com/LucaMele/skeleton-marionette-require-gulp

You should find the info in the file:

https://github.com/LucaMele/skeleton-marionette-require-gulp/blob/master/modules/app.js row 37 ( controller:new App.Router.Controller() )

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Luca Mele
  • 66
  • 3