marionette.routing

1.1.2 • Public • Published

Marionette Routing

NPM version NPM downloads Build Status Coverage Status Dependency Status

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

Examples

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.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.1.211latest

Version History

VersionDownloads (Last 7 Days)Published
1.1.211
1.1.15
1.1.00
1.0.10
1.0.01
0.12.00
0.11.00
0.10.10
0.10.00
0.9.14
0.9.00
0.8.30
0.8.20
0.8.10
0.7.00
0.6.20
0.6.10
0.6.00
0.5.30
0.5.20
0.5.11
0.5.00
0.4.20
0.4.10
0.4.01
0.3.00
0.2.10
0.2.00
0.1.00
0.0.10

Package Sidebar

Install

npm i marionette.routing

Weekly Downloads

23

Version

1.1.2

License

MIT

Unpacked Size

115 kB

Total Files

8

Last publish

Collaborators

  • blikblum