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
;;;;; /* * Define your routes mapping */const routesConfig = '': component: Home index: true 'page1/{id}/:option:': component: Page1 'page2': { //Your own callback that render HTML or just make an async call } 'page3:?query:': component: Page3 { //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 = 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;
Or directly inside templates:
<div>A paramName: routeParamsparamName</div>
Navigation
The Router provide two navigatoin methods:
//Programatically navigate to a new routeRouter; //Similar to Router.go(hash), but doesn't create a new record in browser history.Router;
Demo
$ git clone https://github.com/fayway/ractive-router.git
$ cd ractive-router
$ npm install
$ npm run demo
Navigate to http://localhost:8080/
Tests
$ npm test