ractive-route
v0.3.11
Published
Routing library for Ractive.js
Downloads
26
Readme
ractive-route
Simple routing library for Ractive.js with support for two way (model <-> URI) data binding.
Get started
https://cdn.jsdelivr.net/npm/[email protected]/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.