Introduction

A simple router for Ractive.js applications built on top of Crossroads.js and Hasher

Installation

$ npm i ractivejs-router --save

Installation with jspm

$ jspm install ractive-router=github:fayway/ractive-router

How to use

import Router   from 'ractive-router'

import Navbar   from './components/Navbar';
import Footer   from './components/Footer';
import Home     from './components/home';
import Page1    from './components/page1';
import Page3    from './components/page3';

/*
 * Define your routes mapping
 */
const routesConfig = {
     '': {
         component: Home,
         index: true
     },
     'page1/{id}/:option:': {
         component: Page1
     },
     'page2': {
         callback(routeParams) {
             //Your own callback that render HTML or just make an async call
         }
     },
     'page3:?query:': {
         component: Page3,
         callback(routeParams) {
             //You can define a component and a callback for the same route, the callback will be executed in the oncomplete lifecycle event of the component
         }
     }
};


/*
 * Root App
 */
let app = new Ractive({
    el: '#root',
    data: {
        routesConfig
    },
    components: {
        Navbar,
        Router,
        Footer
    },
    template: `
        <Menu />
        <Router routesConfig={{routesConfig}} />
        <Footer />
    `
});

Routes

Path Params

• /{foo}/{bar} will match lorem/ipsum-dolor
• /foo/{id}/:slug: will match /foo/123/bar and /foo/45, (slug is optional)

Query Strings

• /foo{?query} will match /foo?lorem=ipsum&dolor=amet

Using Routes Params inside Ractive Components

Both Path and Query params are available inside Router Ractive components via the data object routeParams:

Inside JS components:

Ractive.extend({
    oninit()  {
        let routeParams = this.get('routeParams');
        //Do Something with routeParams
    }
});

Or directly inside templates:

<div>A paramName: {{routeParams.paramName}}</div>

Navigation

The Router provide two navigatoin methods:

import Router from 'ractive-router'

//Programatically navigate to a new route
Router.go(hash);

//Similar to Router.go(hash), but doesn't create a new record in browser history.
Router.replace(hash);

Demo

$ git clone https://github.com/fayway/ractive-router.git
$ cd ractive-router
$ npm install
$ npm run demo

Navigate to http://localhost:8080/

Demo code source

Tests

$ npm test