Marionette Routing

An advanced router for MarionetteJS applications

Features

    ✓ Nested routes / states / rendering
    ✓ Handle asynchronous operations
    ✓ Lazy loading of routes with code splitting
    ✓ Expose route events through Radio
    ✓ Implement route context for scoped messaging
    ✓ API interface semantics similar to MarionetteJS one
    ✓ Inherits most of Cherrytree features

Installation

$ npm install --save marionette.routing

Requires MarionetteJS v4+, Radio v2+, underscore v1.8+ as peer dependencies

Requires a ES6 Promise implementation attached in window (native or polyfill)

Usage

Define a Route class

import {Route} from 'marionette.routing';
import {Contacts} from '../entities';
import ContactsView from './view';
 
export default Route.extend({
  activate(){
    const contactsPromise = Radio.channel('api').request('getContactList');
    return contactsPromise.then(contactsData => {
      this.contacts = new Contacts(contactsData)
    });
  },
 
  viewClass: ContactsView,
 
  viewOptions() {
    return {
      contacts: this.contacts
    }
  }
})
 

Configure and start the router

import { Router } from 'marionette.routing';
import ContactsRoute from './contacts/route';
import LoginView from './login/view';
import Mn from 'backbone.marionette';
import Radio from 'backbone.radio';
 
//create the router
let router = new Router(
  { log: true, logError: true }, // options passed to Cherrytree
  '#main' // the element / Marionette Region where the root routes will be rendered
);
 
//define the routes
router.map(function (route) {
  route('application', {path: '/', abstract: true}, function () {
    route('contacts', {routeClass: ContactsRoute})
    route('login', {viewClass: LoginView})
  })
});
 
//start listening to URL changes
router.listen();
 
//listen to events using Radio
Radio.channel('router').on('before:activate', function(transition, route) {
  let isAuthenticate = checkAuth();
  if (!isAuthenticate && route.requiresAuth) {
    transition.redirectTo('login');
  }
})

Documentation

• API
  • Router Configuration
  • Route Class
  • Events
  • RouterLink
• Guides
  • Route lazy loading
  • Managing authorization
  • Handling errors

Examples

• Contact Manager Fully functional example. Read the tutorial
• Marionette Wires Revisited

Related Projects

• Cherrytree — The router library used by Marionette Routing under the hood

License

Copyright © 2016 Luiz Américo Pereira Câmara. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.