Here is a very simple approach to caching Jquery ajax calls.
- Riffing on the use of plain ol' object oriented javascript
- using jquery promise to avoid callback hell
- and jquery proxy to maintain context.
The Model
Here is a simple prototype that will represent out Model and be responsible for making ajax calls.
function MyModel(options) {
this.url = "http://www.some-rest-service.com";
}
// cache
MyModel.prototype.cache = {};
// ajax method
MyModel.prototype.all = function (url) {
// key to uniquely identify ajax call
var cacheKey = 'all()';
// check cache?
if (!this.cache[cacheKey])
{
// add to cache
this.cache[cacheKey] = $.ajax({
url: this.url,
method: 'GET'
}).promise();
}
// return promise
return this.cache[cacheKey];
};
Notice how we store the jquery promise, which callers will use to fetch data.
Unlike a regular jquery events (binds and triggers) which must be caught right at the moment, a jquery promise can be used at any point after it's completion. This is perfect for caching where subsequent calls will definitely be too late for a triggered event.
The View
Now a prototype that would be responsible for using the model to fetch data and render it somewhere.
function MyView(options) { }
MyView.prototype.renderSomething = function () {
// construct model
var model = new MyModel();
// call method
model.all()
.done($.proxy(function(data){
// add data to MyView
this.data = data;
// render here
}, this)
);
};
We simply created the model and used the .done method of the promise to deal with the data right there inline; we could have used a callback as well. Also because we used the jquery proxy, the keyword 'this' still refers to the MyView.