Routing in Backbone.js / Marionette.js - no hashtags, route list and sub-routers

Question

I have three routing questions in Backbone.js / Marionette.js:

• 1) How can I get a list of all routes registered by my application routers?

For example, for Express.js (in Node.js) it will be app.routes .

I am trying to do the same with Backbone.js / Marionette.js, but could not find any property or method that did this.

• 2) I want to clear my URLs and remove the hashtags "#" in front of them, I know that they run routers, so how can I do this?

I found the following script, which is a prototype of the Backbone router, but this is more of a hack than a robust solution: Simple trunking without hash addresses

• 3) Is it possible to have sub-routers in Backbone.js / Marionette.js?

By sub-router, I mean a router that only processes part of the URL, for example:

 var AppRouter = Backbone.Router.extend({ routes: { 'articles' : 'MyArticleRouter' } }); var MyArticleRouter = Backbone.Router.extend({ routes: { 'science' : 'someMethod', 'literrature' : 'someOtherMethod' } }); 

This classifies my URLs a bit, allowing me to define the main routes in the AppRouter and all the routines (the part after the second slash "/") in the sub-routers of the category.

So, for the following URL: "hostname / article / science" the routing process will look something like this:

• 1) pass "/ articles / science" to the AppRouter
• 2) AppRouter breaks the URI and accepts the "/ articles" part
• 3) AppRouter finds the registered route "/ articles"
• 4) AppRouter recognizes that MyArticleRouter is bound to this URI
• 5) AppRouter redirects routing to this router and only passes the "/ science" element as a route
• 6) MyArticleRouter directs "/ science" to someMethod () and starts it

Thank you in advance!

Answer 1

Answer for # 1:

All routes are registered in Backbone.history.handlers .

Answer to # 2:

You can add a handler to each link on your site:

 var application = new Backbone.Marionette.Application(); application.addInitializer(function(options) { // Add class to target a browser, not as standalone app. if(window.navigator.standalone != true) { $('body').addClass('no-standalone'); } // Prevent internal links from causing a page refresh. $(document).on('click', 'a', function(event) { var fragment = Backbone.history.getFragment($(this).attr('href')); var matched = _.any(Backbone.history.handlers, function(handler) { return handler.route.test(fragment); }); if (matched) { event.preventDefault(); Backbone.history.navigate(fragment, { trigger: true }); } }); }); 

Of course, make sure you use pushState:

  if (!Backbone.history.started) { Backbone.history.start({ pushState: true }); } 

This last snippet should be run after all of your routers have initialized.

Answer to # 3:

This might work a little to separate the routes:

 define([ 'backbone', 'underscore', 'routers/dashboard', 'routers/anotherroute1', 'routers/anotherroute2' ], function(Backbone, _, DashboardRouter, AnotherRoute1, AnotherRoute2) { 'use strict'; var application = new Backbone.Marionette.Application(); application.addInitializer(function () { _.each([DashboardRouter, AnotherRoute1, AnotherRoute2], function(router) { new router(); }); if (!Backbone.history.started) { Backbone.history.start({ pushState: true }); } }); return application; });