smarx / ractiveds

Ractive Datastore – Two-way DOM data binding that syncs across devices.

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.