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.

Demo source code

<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(
        'no33k6derwjd4h7', // 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>

Data model

Ractive Datastore uses a single table called "ractivedatastore". Each key/value pair is stored in a record with the key as the ID and the value as a field called "value".

Check it out in the Datastore browser.

Download

You can find the full source code and instructions for using it in the Ractive Datastore GitHub project.