An advanced router for MarionetteJS applications
✓ Nested routes / states / rendering
✓ Handle asynchronous operations
✓ Lazy loading of routes through 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
$ npm install --save marionette.routing
Requires MarionetteJS v3+, Radio v2+, underscore v1.8+ as peer dependencies
Requires a ES6 Promise implementation attached in window (native or polyfill)
Define a Route class
import {Route} from 'marionette.routing';
import {Contacts} from '../entities';
import ContactsView from './view';
export default Route.extend({
activate(){
let 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 { createRouter, middleware} 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 = createRouter({log: true, logError: true});
//define the routes
router.map(function (route) {
route('application', {path: '/', abstract: true}, function () {
route('contacts', {routeClass: ContactsRoute})
route('login', {viewClass: LoginView})
})
});
//define a root region
router.rootRegion = new Mn.Region({el: '#app'});
//connect the middleware
router.use(middleware);
//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');
}
})
Warning: the router configuration interface will likely change in future becoming simpler
- API
- Guides
- Contact Manager Fully functional example. Read the tutorial
- Marionette Wires Revisited
- Cherrytree — The router library used by Marionette Routing under the hood
- Babel Starter Kit — Template used to bootstrap this project
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.