Ractive Datastore – Two-way DOM data binding that syncs across devices.
CoffeeScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
ractivedatastore.coffee
ractivedatastore.js

README.md

Ractive Datastore

This project combines the DOM manipulation and data-binding of Ractive.js with the data sync capabilities of the Dropbox Datastore API.

This combination makes it easy to build two-way databinding that syncs across devices.

Setup

To use the Ractive Datastore library, download ractivedatastore.js and include it in your HTML after both the Ractive.js and Dropbox Datastore API libraries:

<script src="https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js"></script>
<script src="ractive.js"></script>
<script src="ractivedatastore.js"></script>

To build ractivedatastore.js yourself, just run coffee -c ractivedatastore.coffee.

Usage

See the example at ractiveds.site44.com for usage:

<div id="content"></div>
<script id="template" type="text/ractive">
    <h2>Greeting: {{greeting}}, {{recipient}}!</h2>
    <label>Edit the values (two-way data binding!):</label>
    <input value="{{greeting}}" />
    <input value="{{recipient}}" />
</script>

<script>
    var rds = new RactiveDatastore(
        '<YOUR APP KEY>', // app key
        'content', // ID of element to populate with template
        '#template', // template string or tag ID
        { greeting: 'Hello', recipient: 'World' } // initial data
    );

    rds.authenticate();
</script>

Note that the Ractive Datastore library only supports simple key/value pairs. Nested data structures and lists (which are supported by Ractive itself) are not supported.