Backbone-Cache

A cache component for use with Backbone. You can include it in your base app and wrap it. You can also call the methods directly, if you wanted to use it directly in a single view or app for example.

Build Status

Purpose

Sharing data between multiple views
Caching api calls to reduce server load

Source

The source is available on GitHub.

How to use

By default the cache uses window.cache store the items.

Options

storageType - optional

This option determines if the class should use window.cache or internally view this.cache. The valid options are ['window', 'internal']. Defaults to window.

var options = {
    storageType: 'window'
}

eventHandler - optional

This is for listening for event triggers. If you use a custom event object by extending Backbone.Events you can pass in a reference to it here. Otherwise it will default to using Backbone.Events as the event handler.

var App: {
    events: _.extend({}, Backbone.Events)
};

var options = {
    eventHandler: App.events
}

Namespace for cache methods

If no namespace is provided to any of the cache methods and events, it will default to using 'global' as the namespace

Create Cache

Create a cache at a specified namespace. If no namespace is passed in, it defaults to using 'global' as the namespace.

var Cache = require("backbone.cache");

App.cache = new Cache();

// Approach 1
App.cache.createCache("namespace");
// window.cache["namespace"] will exist


// Approach 2
var view = new ToDoView();

//  In the constructor
initalize: function(options) {
    App.events.trigger('cache.createCache', 'ToDoCache');
    // window.cache['ToDoCache'] will now exist
}

Add to cache

Add an item to the cache at the provided key and namespace. If namespace does not exist, createCache will automatically be called.

var Cache = require("backbone.cache");
App.cache = new Cache();

// Approach 1
App.cache.addToCache("key", "value", "namespace");


// Approach 2
var view = new ToDoView();

    // Inside initialize for ToDoView
    initialize: function(options){
        // Load items and save it to cache (ofc, check cache first but this is an example)
        $.ajax({
            url: 'api/path',
            type: 'GET',
            success: function(response) {
                App.events.trigger('cache.addToCache', response);
            }
        });
    }

Remove from cache

Remove an item from the cache at the provided key and namespace.

var Cache = require("backbone.cache");
App.cache = new Cache();

// Approach 1
App.cache.removeFromCache("key", "namespace");


// Approach 2
// (method in a view, model, collection, etc)
noMoreItems: function(){
    App.events.trigger("cache.removeFromCache", "key", "namespace")
}

Clear cache

Removes everything in the cache for the namespace.

var Cache = require("backbone.cache");
App.cache = new Cache();

App.cache.createCache("some-namespace");

// Approach 1
App.cache.clearCache("some-namespace");


// Approach 2
//   Some point where namespaced cache is no longer needed
close: function(){
    App.events.trigger("cache.clearCache", "namespace");
}

Get from cache

Get something from the cache. While an event is thrown with the object returned, its easier to write a quick wrapper method in your base app, or base view to retrieve the item.

// App wrapper
var Cache = require("backbone.cache");
App.cache = new Cache();

App.getFromCache = function(key, namespace){
    return this.cache.getFromCache(key, namespace);
}


// Calling it in your view
var view = new ToDoView({
                models: App.getFromCache("existingToDoItems", "ToDoNamespace");
           });