Marionette.AppRouter as Backbone.Router

[linus-amg]

The following example works as expected:

var App, app;

new Backbone.Router({
  routes: {
    'qwe': function() {
      return console.log('asd');
    }
  }
});

App = Marionette.Application.extend({
  onStart: function() {
    return Backbone.history.start({
      pushState: true
    });
  }
});

app = new App();

$(document).ready(function() {
  return app.start();
});

But this example does not work as expected:

var App, app;

new Marionette.AppRouter({
  routes: {
    'qwe': function() {
      return console.log('asd');
    }
  }
});

App = Marionette.Application.extend({
  onStart: function() {
    return Backbone.history.start({
      pushState: true
    });
  }
});

app = new App();

$(document).ready(function() {
  return app.start();
});

the route does not get triggered, also using appRoutes + Controller/Object does not work, am i doing something wrong?

[linus-amg]

I'm using Backbone 1.2.3 (latest) with Marionette 2.4.3 (latest)

[paulfalgout]

I'm not certain why this wouldn't work. It seems to be tested here: https://github.com/marionettejs/backbone.marionette/blob/master/test/unit/app-router.spec.js#L122

At first glance everything seems ok to me. I'll have to recreate the code somewhere to try this further.

Have you posted this on gitter? http://gitter.im/marionettejs/backbone.marionette

But it does seem like something else might be going on.. if appRoutes + Controller didn't work at all, someone would have chimed in already.

[linus-amg]

hey, my problem was browserify, i had backbone in one bundle and marionette in another bundle (so it wouldnt see the global backbone from the other bundle and require a different backbone instance on its own, so backbone.history would not trigger the backbone.router which is applied to in the approuter

[vinitm]

I have the same problem with browserify and I refered to this post with same problem
Getting Marionette AppRouter to work with Browserify
Can you share how you solved it?

[linus-amg]

you can either build a common.js where all common modules are bundles apart, or require all vendor and plugins in one file and app/module code in another one

[vinitm]

the problem had me banging my head for days.Thanks for your help!!!

[linus-amg]

yeah, it had my head banging for days also, funny solution though, in the end its just how js runtime scope and npm are working together.

[ApoorvSaxena]

creating a single JS file containing all vendor modules along with app code doesn't work for me, any other possible solutions for the same? @elgubenis @vinitm

[paulfalgout]

You need make absolutely sure that you don't have multiple versions of any dependency in your node_modules. marionette for instance should not contain backbone inside of its node_modules folder inside of your node_modules folder. Really if the folder backbone shows up more than once in your node_modules folder you have an issue.

Then if you make sure that the very first thing that happens in your code is

import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';
import Radio from 'backbone.radio';
import Marionette from 'backbone.marionette';

or the equivalent for v2 or whatever loader you're using then this will work.

[ApoorvSaxena]

@paulfalgout have made sure of the concerns made above, though still facing the issue. Here's the code for reference https://github.com/ApoorvSaxena/browserify-marionette

[ApoorvSaxena]

Issue for me was resolved by replacing AppRouter extension with instantiation of AppRouter, as described below:

Previously:

Marionette.AppRouter.extend({
    routes: {
        'test': 'testFn'
    },
    testFn: function() {
        console.log('testing successful');
    }
})

Replaced with:

new Marionette.AppRouter({
    controller: controller,
    appRoutes: {
        'test': 'testFn'
    }
});