Code Monkey home page Code Monkey logo

backbone-fetch-cache's Introduction

Backbone fetch cache

Build Status

A Backbone plugin to cache calls to Backbone.Model.prototype.fetch and Backbone.Model.prototype.fetch in memory and localStorage.

How it works

This plugin intercepts calls to fetch and stores the results in a cache object (Backbone.fetchCache._cache). If fetch is called with { cache: true } in the options and the URL has already been cached the AJAX call will be skipped.

The local cache is persisted in localStorage if available for faster initial page loads.

The prefill option allows for models and collections to be filled with cache data just until the fetch operations are complete -- a nice way to make the app feel snappy on slower connections.

What's wrong with browser caching for AJAX responses?

Nothing. This plugin is primarily for working with an API where you don't have control over response cache headers.

Usage

Add the script to the page after backbone.js has been included:

<script src="/path/to/backbone.js"></script>
<script src="/path/to/backbone.fetch-cache.js"></script>

or if you're using AMD, require the script as a module:

require(['path/to/backbone.fetch-cache.js']);

Note that the AMD module depends on underscore and backbone modules being defined as it lists them as dependencies. If you don't have these mapped, you can do it by adding the following to your require config:

requirejs.config({
  paths: {
    backbone: 'actual/path/to/backbone.js',
    underscore: 'actual/path/to/underscore.js'
  }
});

A note on Zepto.js. This plugin uses jQuery.Deferred which is not included in Zepto. You'll need to add a third party implementation of jQuery.Deferred, e.g. Standalone-Deferred

Options

cache

Calls to modelInstance.fetch or collectionInstance.fetch will be fulfilled from the cache (if possible) when cache: true is set in the options hash:

myModel.fetch({ cache: true });
myCollection.fetch({ cache: true });

prefill

This option allows the model/collection to be populated from the cache immediately and then be updated once the call to fetch has completed. The initial cache hit calls the prefillSuccess callback and then the AJAX success/error callbacks are called as normal when the request is complete. This allows the page to render something immediately and then update it after the request completes. (Note: the prefillSuccess callback will not fire if the data is not found in the cache.)

myModel.fetch({
  prefill: true,
  prefillSuccess: someCallback, // Fires when the cache hit happens
  success: anotherCallback // Fires after the AJAX call
});

myCollection.fetch({
  prefill: true,
  prefillSuccess: someCallback, // Fires when the cache hit happens
  success: anotherCallback // Fires after the AJAX call
});

This option can be used with the promises interface like so (note: the progress event will not fire if the data is not found in the cache.):

var modelPromise = myModel.fetch({ prefill: true });
modelPromise.progress(someCallback); // Fires when the cache hit happens
modelPromise.done(anotherCallback); // Fires after the AJAX call

var collectionPromise = myModel.fetch({ prefill: true });
collectionPromise.progress(someCallback); // Fires when the cache hit happens
collectionPromise.done(anotherCallback); // Fires after the AJAX call

expires

Cache vales expire after 5 minutes by default. You can adjust this by passing expires: <seconds> to the fetch call. Set to false to never expire:

myModel.fetch({ cache: true, expires: 60000 });
myCollection.fetch({ cache: true, expires: 60000 });

// These will never expire
myModel.fetch({ cache: true, expires: false });
myCollection.fetch({ cache: true, expires: false });

localStorage

By default the cache is persisted in localStorage (if available). Set Backbone.fetchCache.localStorage = false to disable this:

Backbone.fetchCache.localStorage = false;

Tests

You can run the tests by cloning the repo, installing the dependencies and running grunt jasmine:

$ npm install
$ grunt jasmine

The default grunt task runs tests and lints the code.

$ grunt

Changelog

  • v0.1.2: Add AMD support.
  • v0.1.1: Add prefetch option.

backbone-fetch-cache's People

Contributors

appleton avatar inf0rmer avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.