Coder Social home page Coder Social logo

ctomczyk / ractive-router Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fayway/ractive-router

0.0 1.0 0.0 956 KB

A simple router for Ractive.js applications implemented using Crossroads.js and Hasher

JavaScript 93.30% HTML 1.84% Shell 4.86%

ractive-router's Introduction

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

ractive-router's People

Contributors

fayway avatar

Watchers

 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.