A skeleton for setting up an application with a router.

driver.js

import Bb from 'backbone';
import {Application, View} from 'backbone.marionette';
import _ from 'underscore';

// The Router class defined above
import {Router} from './router'

// If you use a navbar or panel
import {NavView} from './views/nav';
// Your home page
import {IndexView} from './views/index';


const RootView = View.extend({
  template: _.template('<nav id="nav-hook"></nav><div id="body-hook"></div>'),
  
  regions: {
    nav: '#nav-hook',
    main: '#body-hook'
  },
  
  onRender() {
    this.showChildView('nav', new NavView());
  },
  
  showIndex() {
    this.showChildView('main', new IndexView());
  },
  
  showItemList() {
    // Get the item list collection and show it
  },
  
  showItemFromId(itemId) {
    // If the collection comes from the server, we'll need to fetch it
    // manually. We may need to ensure it's set up with the collection too
  }
});


const App = Application.extend({
  region: '#root', // Your <div> identifier from before
  
  onStart() {
    const rootView = new RootView();
    const router = new Router({rootView: rootView});
    this.showView(rootView);

    Bb.history.start();  // Start the route handler
  }
});

const app = new App();
app.start();

router.js

import Mn from 'backbone.marionette';


const Controller = Mn.Object.extend({
  default() {
    const rootView = this.getOption('rootView');
    rootView.showIndex();
  },

  itemList() {
    const rootView = this.getOption('rootView');
    rootView.showItemList();
  },

  showItem(item) {
    const rootView = this.getOption('rootView');
    const itemId = this._cleanItemId(item);
    rootView.showItemFromId(item);
  },
  
  _cleanItemId(item) {
    // Convert item string from router to the right type
  }
});


export const Router = Mn.AppRouter.extend({
  initialize(options) {
    this.controller = new Controller(options);
  },
  
  appRoutes: {
    '': 'default',
    'items/': 'itemList',
    'items/:item': 'showItem'
  }
});