Giter Club home page Giter Club logo

marionette.routing's Introduction

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 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

Installation

$ 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)

Usage

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

Documentation

Examples

Related Projects

  • Cherrytree — The router library used by Marionette Routing under the hood
  • Babel Starter Kit — Template used to bootstrap this project

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.

marionette.routing's People

Contributors

blikblum avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.