scriptonia

Pomodoro App

Hi everyone!

I’ve just pushed my simple application for working with pomodoro.

based on backbonejs, jquerymobile, sinatra, rack-offline.

http://pomodoro-app.heroku.com/

backbone-queues

Hi everyone!

I have just published very small library for backbone.

May be it will helps someone.

https://github.com/oivoodoo/backbone-queues

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