Backbone.Hoard example

A simple example to demonstrate Backbone.Hoard's request buffering and caching

by cmaher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/polyfills/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="https://cdn.rawgit.com/cmaher/backbone.hoard/master/dist/backbone.hoard.js"></script>
<div id="control" class="box">
    <button id="reset">Reset</button>
    <br/>
    <input id="toggleHoard" name="toggleHoard" type="checkbox" />
    <label for="toggleHoard">Enable Hoard</label>
</div>
<div id="fetcher" class="box">CLIENT
    <br/>
    <button id="fetch">Fetch</button>
    <button id="fetch3">Fetch x3</button>
    <br/>Grabbed data <span data-fetches></span> time(s)</div>
<div id="server" class="box">SERVER
    <br/>Responded with data <span data-fetches></span> time(s)
    <br/>Status: <span data-status></span>

</div>

CSS

* {
    box-sizing: border-box;
}
.box {
    border-radius: 5px;
    padding: 8px;
    background-color: #eee;
    height: 80px;
}
.heavy-load {
    background-color:#BF4F4E;
}
#server {
    float: left;
    margin-left: 25px;
    min-width: 210px;
}
#fetcher {
    margin-left: 15px;
    float: left;
}
#control {
    margin: 15px;
    width: 125px;
    padding-top: 40 px;
}
#reset {
    margin-top: 10px;
}

JavaScript

//Avoid actual XHRs in fiddle
var fetchCount = 0;
Backbone.sync = function (method, model, options) {
    model.trigger('request');
    server.startFetch();
    var defer = Backbone.Hoard.defer();
    var delay = (server.model.get('requests') + 1) * _.random(100, 500);
    _.delay(defer.resolve, delay);
    return defer.promise.then(function () {
        var response = {
            fetched: true
        };
        options.success(response);
        server.stopFetch();
        return response;
    });
};
Backbone.Hoard.sync = Backbone.sync;

//Avoid actual localStorage in fiddle
var InMemoryStorage = function () {
    this.storage = {};
}

_.extend(InMemoryStorage.prototype, {
    setItem: function (key, value) {
        this.storage[key] = value;
    },

    getItem: function (key) {
        var value = this.storage[key];
        if (_.isUndefined(value)) {
            value = null;
        }
        return value;
    },

    removeItem: function (key) {
        delete this.storage[key];
    },
    reset: function () {
        this.storage = {};
    }
});
Backbone.Hoard.backend = new InMemoryStorage();

// Begin Actual Example
var cacheControl = new Backbone.Hoard.Control();
var hoardSync = cacheControl.getModelSync();
var Model = Backbone.Model.extend({
    url: '/model'
});

var resetButton = new(Backbone.View.extend({
    el: '#reset',
    events: {
        click: 'reset'
    },
    reset: function () {
        Backbone.Hoard.backend.reset();
        server.reset();
        fetcher.reset();
    }
}))();

var toggleBox = new(Backbone.View.extend({
    el: '#toggleHoard',
    events: {
        click: 'onToggle'
    },
    initialize: function () {
        this.onToggle()
    },
    onToggle: function () {
        if (this.$el.is(':checked')) {
            Model.prototype.sync = hoardSync;
        } else {
            Model.prototype.sync = Backbone.sync;
        }
    }
}))();

var server = new(Backbone.View.extend({
    el: '#server',
    initialize: function...