https://github.com/blikblum/marionette.routing
State based router for MarionetteJS
https://github.com/blikblum/marionette.routing
backbone marionettejs router
Last synced: about 1 year ago
JSON representation
State based router for MarionetteJS
- Host: GitHub
- URL: https://github.com/blikblum/marionette.routing
- Owner: blikblum
- License: mit
- Created: 2016-10-30T19:08:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T00:08:01.000Z (over 3 years ago)
- Last Synced: 2024-10-29T09:14:00.278Z (over 1 year ago)
- Topics: backbone, marionettejs, router
- Language: JavaScript
- Size: 1.64 MB
- Stars: 21
- Watchers: 3
- Forks: 3
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Marionette Routing
[](https://www.npmjs.com/package/marionette.routing)
[](https://www.npmjs.com/package/marionette.routing)
[](https://travis-ci.org/blikblum/marionette.routing)
[](https://coveralls.io/github/blikblum/marionette.routing)
[](https://david-dm.org/blikblum/marionette.routing#info=devDependencies)
> 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](https://github.com/marionettejs/backbone.radio)
✓ Implement route context for scoped messaging
✓ API interface semantics similar to MarionetteJS one
✓ Inherits most of [Cherrytree](https://github.com/QubitProducts/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
```js
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
```js
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](docs/configuration.md)
* [Route Class](docs/route.md)
* [Events](docs/events.md)
* [RouterLink](docs/routerlink.md)
* Guides
* [Route lazy loading](docs/lazyload.md)
* [Managing authorization](docs/authorization.md)
* [Handling errors](docs/errors.md)
### Examples
* [Contact Manager](https://github.com/blikblum/marionette-contact-manager) Fully functional example. Read the [tutorial](http://jsroad.blogspot.com.br/2016/11/tutorial-contact-manager-application.html)
* [Marionette Wires Revisited](https://github.com/blikblum/marionette-wires-revisited)
### Related Projects
* [Cherrytree](https://github.com/QubitProducts/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](https://github.com/blikblum/marionette.routing/blob/master/LICENSE.txt) file.
The documentation to the project is licensed under the [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
license.