ractive-ez-searchsync
v2.0.1
Published
Ractive Ez UI Search Sync
Downloads
2
Maintainers
Readme
Ractive Ez Search Sync
Href search synchronizer - keeps the url search in sync with a ractive object.
Install
npm i ractive-ez-searchsync
import 'ractive-ez-searchsync';
Usage
<EzSearchSync search="{{ filters }}" mapper="{{ mapper }}" />
<EzSearchSync mode="push" />
<EzSearchSync defer />
search
: Simple key => value object that contains the query parametersmapper
: Object that maps a key to a { parse, stringify } object to map between a javascript object and an url query stringmode
:push
to use history.pushState,replace
to use history.replaceStatedefer
: When initially loading the component, the current location query will be used to populate the search object. Use defer to disable this behaviour.
import { mapper } from 'ractive-ez-searchsync';
new Ractive({
data() {
return {
search: {
name: "John",
active: true,
born: new Date(),
age: 87,
password: "secret",
labels: ["Male", "Tall", "Old"]
},
mapper: {
name: mapper.string,
active: mapper.boolean,
born: mapper.date,
age: mapper.number,
// password: omitted, will not be synchronized
labels: {
parse: string => string.split(","),
stringify: array => array.join(",")
}
}
}
}
});