npm + your favorite CommonJS bundler is easiest.
npm install ractive-state-router
You can also download the stand-alone build from wzrd.in. If you include it in a
<script> tag, a
ractiveStateRouter function will be available on the global scope.
In version 7, the "active state" decorator changed from taking a string of state name/options to be parsed apart, to taking the state name, options object, and an optional class name.
var StateRouter =var Ractive =var makeRactiveStateRenderer =var domready =var renderer =var stateRouter =// add whatever states to the state router
makeRactiveStateRenderer(Ractive, [ractiveOptions, [options]])
options is an object with one optional property:
deepCopyDataOnSet (defaults to
true, the content from the resolve function will be deep copied before being set on the Ractive object, in order to try to maintain the immutability of whatever objects you pass in.
var StateRouter =var Ractive =var RactiveRenderer =var renderer =var stateRouter =
active decorator adds the
active class to an element if the given state is currently active. It takes three arguments: a state name (string), an optional parameters object, and a class name to be applied to the element if the state is active (defaults to
makePath function from the abstract-state-router is also exposed.
Passing templates to
When calling the abstract-state-router's addState function, you may provide any of these values as the
- a Ractive template string
- a parsed Ractive template object
- an object of Ractive initialization options to instantiate the Ractive object with. Should contain a