Natural Performance Manager
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ractive-state-routerpublic

    Use Ractive with abstract-state-router!

    Install

    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.

    Breaking changes

    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.

    Usage

    var StateRouter = require('abstract-state-router')
    var Ractive = require('ractive')
    var makeRactiveStateRenderer = require('ractive-state-router')
    var domready = require('domready')
     
    var renderer = makeRactiveStateRenderer(Ractive)
     
    var stateRouter = StateRouter(renderer, 'body')
     
    // add whatever states to the state router 
     
    domready(function() {
        stateRouter.evaluateCurrentRoute('login')
    })

    makeRactiveStateRenderer(Ractive, [ractiveOptions, [options]])

    ractiveOptions is an object that is passed into Ractive.extend and takes Ractive's options.

    options is an object with one optional property: deepCopyDataOnSet (defaults to false). When 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 = require('abstract-state-router')
    var Ractive = require('ractive')
    var RactiveRenderer = require('ractive-state-router')
     
    var renderer = RactiveRenderer(Ractive, {
        data: { hello: 'world' }
    })
    var stateRouter = StateRouter(renderer, 'body')

    In templates

    The 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 'active').

    The makePath function from the abstract-state-router is also exposed.

    <li as-active="'app.some-state', { parameter: 'somevalue' }, 'totally-active">
        <a href="{{ makePath('app.some-state') }}">Some state</a>
    </li>

    Passing templates to addState

    When calling the abstract-state-router's addState function, you may provide any of these values as the template:

    • a Ractive template string
    • a parsed Ractive template object
    • an object of Ractive initialization options to instantiate the Ractive object with. Should contain a template property.

    install

    npm i ractive-state-router

    Downloadslast 7 days

    25

    version

    7.1.0

    license

    WTFPL

    repository

    github.com

    last publish

    collaborators

    • avatar