Backbone Blog Post :: Live Collections

add_duplication_check.js

// A collection holding many tweet objects.
// also responsible for performing the
// search that fetches them.
var Tweets = Backbone.Collection.extend({
  model: Tweet,
  initialize: function(models, options) {
    this.query = options.query;
  },
  url: function() {
    return "http://search.twitter.com/search.json?q=" + this.query + "&callback=?";
  },
  parse: function(data) {

    // note that the original result contains tweets inside of a results array, not at 
    // the root of the response.
    return data.results;
  },
  add : function(models, options) {
    var newModels = [];
    _.each(models, function(model) {
      if (_.isUndefined(this.get(model.id))) {
        newModels.push(model);    
      }
    }, this);
    return Backbone.Collection.prototype.add.call(this, newModels, options);
  }
});

backbone.collection._add.snippet.js

// From Backbone.Collection's definition:
_add : function(model, options) {
  options || (options = {});
  model = this._prepareModel(model, options);
  if (!model) return false;
  var already = this.getByCid(model);
  if (already) throw new Error(["Can't add the same model to a set twice", already.id]);

base_cat_tweets.js

var catTweets = new Tweets([], { query : "cats" });
var catTweetsView = new TweetsView({ collection : catTweets });

catTweets.fetch({
  success : function(collection) {
    $('#example_content').html(catTweetsView.render().el);
  }
});

base_collection.js

var Tweets = Backbone.Collection.extend({
  model : Tweet,
  initialize : function(models, options) {
    this.query = options.query;
  },
  url : function() {
    return "http://search.twitter.com/search.json?q=" + this.query + "&callback=?";
  },
  parse : function(data) {

    // note that the original result contains tweets inside of a 'results' array, not at 
    // the root of the response.
    return data.results;
  }
});

var TweetsView = Backbone.View.extend({
  tagName : "ul",
  className : "tweets",
  render : function() {

    // for each tweet, create a view and prepend it to the list.
    this.collection.each(function(tweet) {
      var tweetView = new TweetView({ model : tweet });
      $(this.el).prepend(tweetView.render().el);
    }, this);

    return this;
  }
});

base_tweet.js

// Base Tweet Model. 
var Tweet = Backbone.Model.extend({});

// Base representation of a tweet
var TweetView = Backbone.View.extend({
  tagName : "li",
  className : "tweet",
  render : function() {
    
    // just render the tweet text as the content of this element.
    $(this.el).html(this.model.get("text"));
    return this;
  }
});

cid_overwrite_tweet.js

// A container for a tweet object.
var Tweet = Backbone.Model.extend({
  initialize: function(attributes, options) {
    this.cid = this.id;
  }
});

live_cat_tweets.js

var catTweets = new Tweets([], { query : "cats" });
var catTweetsView = new TweetsView({ collection : catTweets });

// Before we even start our fetch, we append the initial view so that it serves as a 
// placeholder for all the tweets we will be adding.
$('#example_content').html(catTweetsView.render().el);

// Note that we've added the "add" property to the fetch options 
// and set it to true.
// This will ensure each additionally fetched tweet will be _added_ to the collection
// rather than overwrite its existing contents.
var updateTweets = function() {
  catTweets.fetch({
    add: true
  });
  setTimeout(updateTweets, 1000);
};
updateTweets();

live_tweets_view.js

// A rendering of a collection of tweets.
var TweetsView = Backbone.View.extend({
  tagName: "ul",
  className : "tweets",
  initialize: function(options) {
    // Bind on initialization rather than rendering. This might seem
    // counter-intuitive because we are effectively "rendering" this
    // view by creating other views. The reason we are doing this here
    // is because we only want to bind to "add" once, but effectively we should
    // be able to call render multiple times without subscribing to "add" more
    // than once.
    this.collection.bind("add", function(model) {
      var tweetView = new TweetView({
        model: model
      });

      $(this.el).prepend(tweetView.render().el);
    }, this);
  },
  render: function() {
    return this;
  }
});

stream_collection.js

// Create a StreamCollection
var StreamCollection = Backbone.Collection.extend({
  stream: function(options) {
        
    // Cancel any potential previous stream
    this.unstream();
        
    var _update = _.bind(function() {
      this.fetch(options);
      this._intervalFetch = window.setTimeout(_update, options.interval || 1000);
    }, this);

    _update();
  },

  unstream: function() {
    window.clearTimeout(this._intervalFetch);
    delete this._intervalFetch;
  },
    
  isStreaming : function() {
    return _.isUndefined(this._intervalFetch);   
  }
});

twitter_response.json

{
  completed_in: 0.014,
  max_id: 149590100207091700,
  max_id_str: "149590100207091712",
  next_page: "?page=2&max_id=149590100207091712&q=cats",
  page: 1,
  query: "cats",
  refresh_url: "?since_id=149590100207091712&q=cats",
  results: [
    {
      created_at: "Wed, 21 Dec 2011 20:40:33 +0000",
      from_user: "EmmySchmt",
      from_user_id: 105722790,
      from_user_id_str: "105722790",
      from_user_name: "Emily Schmidt",
      geo: null,
      id: 149590100207091700,
      id_str: "149590100207091712",
      iso_language_code: "en",
      metadata: {
        result_type: "recent"
      },
      profile_image_url: "http://a3.twimg.com/profile_images/1553973709/LLP_normal.jpg",
      profile_image_url_https: "https://si0.twimg.com/profile_images/1553973709/LLP_normal.jpg",
      source: "<a href="http://seesmic.com/" rel="nofollow">Seesmic</a>",
      text: "My nephews playing a fishing game. Ya know kid, fish aren't cats. You can't pull the bait away from them for fun.",
      to_user: null,
      to_user_id: null,
      to_user_id_str: null,
      to_user_name: null
    },
    { ... }
  ]    
}

in add_duplication_check.js you could clean that up a bit using _.filter instead of doing it yourself with _.each.

I found stream_collection.js very interesting, I added that code with some loggin to my collection and I realized that the function isStreaming() isnt working well :S

  isStreaming : function() {
    return _.isUndefined(this._intervalFetch);   
  }

return true in the case that _intervalFetch is undefined, I must add return !_.isUndefined(this._intervalFetch);

Greetings :D.