All Projects → blikblum → marionette.routing

blikblum / marionette.routing

Licence: MIT license
State based router for MarionetteJS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to marionette.routing

Marionette.toolkit
A collection of opinionated Backbone.Marionette extensions for large scale application architecture.
Stars: ✭ 71 (+238.1%)
Mutual labels:  backbone
Dimeshift
💰💰💰 the easiest way to track your expenses. Free. Open-source. Node.js
Stars: ✭ 173 (+723.81%)
Mutual labels:  backbone
node-chat
A demo of using socket.io + backbone.js to create a simple chatroom service.
Stars: ✭ 43 (+104.76%)
Mutual labels:  backbone
Backbone Parse
A Backbone plugin to make it work with Parse.com out of the box. 💥
Stars: ✭ 87 (+314.29%)
Mutual labels:  backbone
Backbone Poller
Backbone poller is a simple utility that allows polling on any backbone model or collection
Stars: ✭ 140 (+566.67%)
Mutual labels:  backbone
Modern Backbone Starterkit
Lightweight starting point for a modern backbone web app.
Stars: ✭ 189 (+800%)
Mutual labels:  backbone
Backbone Faux Server
A framework for mocking up server-side persistence / processing for Backbone.js
Stars: ✭ 55 (+161.9%)
Mutual labels:  backbone
NestedReact
BackboneJS compatibility layer for React-MVx MVVM framework.
Stars: ✭ 79 (+276.19%)
Mutual labels:  backbone
Marionette.inspector
🔍 Marionette Inspector - Explore your App
Stars: ✭ 170 (+709.52%)
Mutual labels:  backbone
bocco
Generate API documentation from Markdown
Stars: ✭ 39 (+85.71%)
Mutual labels:  backbone
Nestedtypes
BackboneJS compatibility layer for Type-R data framework.
Stars: ✭ 94 (+347.62%)
Mutual labels:  backbone
Backboneanalyze
backbone源码解读
Stars: ✭ 129 (+514.29%)
Mutual labels:  backbone
Singool
Backbone.js based framework for developing single-page web applications
Stars: ✭ 190 (+804.76%)
Mutual labels:  backbone
Backbone
This training kit has been developed to learn the basics of Backbone.JS.
Stars: ✭ 84 (+300%)
Mutual labels:  backbone
modified refinedet
Modified RefineDet
Stars: ✭ 23 (+9.52%)
Mutual labels:  backbone
Restfeel
RESTFeel: 一个企业级的API管理&测试平台。RESTFeel帮助你设计、开发、测试您的API。
Stars: ✭ 59 (+180.95%)
Mutual labels:  backbone
Backbone Redux
Easy way to keep your backbone collections and redux store in sync.
Stars: ✭ 185 (+780.95%)
Mutual labels:  backbone
backscatter
Reactive extension for Backbone
Stars: ✭ 17 (-19.05%)
Mutual labels:  backbone
Awesome-Vision-Transformer-Collection
Variants of Vision Transformer and its downstream tasks
Stars: ✭ 124 (+490.48%)
Mutual labels:  backbone
Cloudtunes
Web-based music player for the cloud ☁️ 🎶 Play music from YouTube, Dropbox, etc.
Stars: ✭ 2,449 (+11561.9%)
Mutual labels:  backbone

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].