backbone js snippets
Hi, everyone.
Not far a long time ago I’ve started to work on one project where we was using backbone for creating offline website version. It means we have a goal to create possibility to delay our requests to the server and works without postbacks.
We took example with backbone localstorage from backbone docs website(http://documentcloud.github.com/backbone/docs/backbone-localstorage.html). it’s very nice sources. But I’ve found that if you will decide to clear properly local storage you need to create extension.
The first extension for more pleasure removing keys from localstorage:
Store.destroy = function() {
var models = [].slice.call(arguments, 0);
for(var i = 0; i < models.length; i++)
localStorage.removeItem(models[i]);
};
The second extension for changing removing collection from localstorage using sync method. As you can at first I am iterating through collection and then executing save method for localstorage.
_.extend(Store.prototype, {
// ...
destroy_all: function(collection) {
var self = this;
collection.each(function(model) {
delete self.data[model.id];
});
this.save();
return collection;
}
});
Backbone.sync = function(method, model, options) {
// ...
case "delete_all": resp = store.destroy_all(model);
}
// ...
};
Backbone.Collection.prototype.destroy_all = function(options) {
options = options || {};
var collection = this;
var success = options.success;
options.success = function(resp) {
collection.trigger('destroy_all', collection, options);
if (success) success(collection, resp);
};
options.error = (function(onError, c, options) {
return function(resp) {
if (onError) {
onError(model, resp, options);
} else {
model.trigger('error', c, resp, options);
}
};
})(options.error, collection, options);
return (this.sync || Backbone.sync).call(this, 'delete_all', this, options);
};
Also I want to provide very small snippet how to override fetch method for collecitons. Sometimes it’s very helpfull for filtering values by another collection. Let’s check example:
var Post = Backbone.Model.extend({
initialize: function() {
this.localStorage = new Store('posts');
}
});
var Comment = Backbone.Model.extend({
initialize: function() {
this.localStorage = new Store('comments');
}
});
var Comments = Backbone.Collection.extend({
model: Comment,
initialize: function(posts) {
this.localStorage = new Store('comments');
this.posts = posts;
this._parent_fetch = Backbone.Collection.prototype.fetch;
},
fetch: function() {
options = options || {};
var self = this;
this._parent_fetch.call(this, {
success: function() {
self.reset(self.find_by_posts(self.posts));
options.success.call(self, self);
},
error: options.error
});
},
find_by_posts: function(posts) {
var ids = posts.map(function(post) { return post.id; });
return this.filter(function(comment) {
return _.include(ids, comment.get('post_id'));
});
}
});
// Example:
var posts = new Posts();
posts.fetch({
success: function() {
var comments = new Comments(posts.models);
comments.fetch({
success: function() {
comments.each(function(comment){
// show comments related to posts
console.log(comment.id);
console.log(comment.get('post_id'));
});
}
});
}
});
That’s it
