ractive-route v0.3.11

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 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.