Nuclear Potato Monster


    0.3.9 • Public • Published


    Simple routing library for Ractive.js with support for two way (model <-> URI) data binding.

    See it in action! (source)

    Get started

    ractive-route will always expose itself as Ractive.Router. Additionally, you can load it using AMD or CommonJS module loader.


    new Router(options)

    options Object:

    el HTMLElement|string|jQuery-like collection

    el that will be passed to your Ractive components.

    data function

    A function that will be invoked every time a time a new component is created and the returned data will be passed to your component.

    basePath string (default: '')

    Path to your application.

    history Object (default: window.history)

    Custom History API to use. It has to implement pushState() and replaceState() methods.

    strictMode boolean (default: false)

    If set to false, URLs are case insensitive and starting and trailing slashes are ignored.

    reloadOnClick boolean (default: false)

    If set to true, clicking on a link will always force a dispatch().

    addRoute(pattern, Handler[, observe])

    pattern string

    Can contain required or optional variables:

    /users/:id/ - required
    /users/:id?/ - optional

    By default, every variable will match anything except /. You can specify a pattern for each variable if you want:


    Handler function

    Ractive component or function to handle the requests.

    Observe Object

    This object can contain one or more of the following properties:

    • qs - a list of keys that will be observed and synced with query string.
    • hash - a list of keys that will be observed and synced with hash.
    • state - a list of keys that will be observed and synced with the History API.

    dispatch(request[, options])

    Dispatch the request to the first route matching the request. If there is no such route, redirect to the requested URI.

    request string

    Either a relative or an absolute URI.

    options Object:

    reload boolean (default: false)

    If set to false, then the request will be dispatched only if there is a difference between the new and the current URI.

    noHistory boolean (default: false)

    If set to false, then replaceState() will be used instead of pushState().

    qs Object

    Additional query string data. These two lines will do exactly the same:

    router.dispatch('/users/123/', { qs: { search: 'a' } });

    hash Object

    Additional hash data. These two lines will do exactly the same:

    router.dispatch('/users/123/', { hash: { search: 'a' } });

    state Object

    State data that will be passed to pushState() function.


    Returns a current URI relative to basePath.


    A shorthand for:

    router.dispatch(router.getUri(), { noHistory: true });


    Returns a first route matching the request or null.


    Watch all links that don't have router-ignore class and match the pattern and perform dispatch() on click. The default pattern matches all internal links.

    pattern RegExp (default: new RegExp('^((https?:)?\\/\\/' + location.hostname.replace(/\./g, '\\.') + '.*|((?!\\/\\/)[^:]+))$');)


    Stop listening to click events.


    Perform dispatch() on popstate.


    Stop listening to popstate events.


    Copyright (c) 2014 - 2017 Martin Kolárik. Released under the MIT license.


    npm i ractive-route

    DownloadsWeekly Downloads






    Unpacked Size

    40.3 kB

    Total Files


    Last publish


    • martin-kolarik