Sample PouchDB

by riddla

HTML

<script src="//cdn.jsdelivr.net/pouchdb/6.2.0/pouchdb.min.js"></script>
<div class="appbar">
    <button data-bind='click: addCustomer'>Add Customer</button>
    <button data-bind='click: syncDB'>Synchronize</button> <span data-bind='text: customers().length'>&nbsp;</span> customers <span id="msg"></span>

</div>
<table>
    <thead>
        <tr>
            <th class="column">First name</th>
            <th class="column">Last name</th>
            <th class="column">Email address</th>
            <th class="column">Telephone</th>
            <th class="column">City</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: customers'>
        <tr>
            <td>
                <input data-bind='value: firstname' />
            </td>
            <td>
                <input data-bind='value: lastname' />
            </td>
            <td>
                <input data-bind='value: email' />
            </td>
            <td>
                <input data-bind='value: telephone' />
            </td>
            <td>
                <input data-bind='value: city' />
            </td>
            <td>
                <button data-bind='click: $root.updateCustomer'>Update</button>
            </td>
            <td>
                <button data-bind='click: $root.removeCustomer'>Delete</button>
            </td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: Arial;
    margin: 60px;
}
table {
    border-spacing:0;
    border-collapse:collapse;
}
input {
    margin:0;
    border:0;
    font-size: 14px;
    padding: 4px;
    width: 150px;
}
tr {
    border-bottom: 1px solid #000;
}
th.column {
    width: 150px;
}
.appbar button {
    border: 2px solid;
    height: 30px;
    cursor: pointer;
}
tbody button {
    border: 1px solid #ccc;
    font-size: 14px;
    cursor: pointer;
}
.appbar {
    margin-bottom: 20px;
}
#msg {
    background: #c00;
    color: #fff;
    padding: 5px;
    float: right;
    display: none;
}

JavaScript

var db = new PouchDB('customers');

db.changes({
    continuous: true,
    onChange: updateVM
});

function updateVM() {
    db.allDocs({
        include_docs: true,
        descending: false
    }, function (err, doc) {
        viewModel.customers.removeAll();
        doc.rows.forEach(function (row) {
            viewModel.customers.push(row.doc);
        });
    });
}

var CustomerModel = function () {
    var self = this;
    self.customers = ko.observableArray();

    self.addCustomer = function () {

        var customer = {
            _id: new Date().toISOString(),
            firstname: "",
            lastname: "",
            email: "",
            telephone: "",
            city: ""
        };

        db.put(customer, function callback(err, result) {
            if (!err) {
                console.log('Customer added.');
            } else {
                console.log(err);
            }
        });

    };

    self.updateCustomer = function (customer) {
        db.put(customer, function callback(err, result) {
            if (!err) {
                console.log('Customer updated.');
            } else {
                console.log(err);
            }
        });
    };

    self.removeCustomer = function (customer) {
        db.remove(customer);
    };

    self.syncDB = function () {

        showMsg('Synchronizing...');

        var remoteCouchDB = 'http://idlebit.iriscouch.com/customers';
        var options = {
            complete: syncDBCompleted
        };

        db.replicate.to(remoteCouchDB, options);
        db.replicate.from(remoteCouchDB, options);
    }
};

function syncDBCompleted() {
    showMsg('Synchronization completed!', true);
}

function showMsg(text, autohide) {
    var msg = document.getElementById("msg");
    msg.innerText = text;
    msg.style.display = 'block';

    if (autohide) {
        setTimeout(function () {
            msg.style.display = 'none';
        }, 3000);
    }
}

var viewModel = new...