Nuclear Potato Monster

    ractive-route

    0.3.9 • Public • Published

    ractive-route

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

    See it in action! (source)

    Get started

    https://cdn.jsdelivr.net/npm/ractive-route@0.3.7/ractive-route.min.js
    

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

    API

    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:

    /users/:id(\d+)/
    /users/:id(\d+)?/
    

    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/?search=a');
    router.dispatch('/users/123/', { qs: { search: 'a' } });

    hash Object

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

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

    state Object

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

    getUri()

    Returns a current URI relative to basePath.

    init(options)

    A shorthand for:

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

    match(request)

    Returns a first route matching the request or null.

    watchLinks([pattern])

    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, '\\.') + '.*|((?!\\/\\/)[^:]+))$');)

    unwatchLinks()

    Stop listening to click events.

    watchState()

    Perform dispatch() on popstate.

    unwatchState()

    Stop listening to popstate events.

    License

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

    Install

    npm i ractive-route

    DownloadsWeekly Downloads

    3

    Version

    0.3.9

    License

    MIT

    Unpacked Size

    40.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • martin-kolarik