JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<button>change filter</button>

CSS

body {
	margin: 10px;
    font: 13px/1.3 Arial;
}

JavaScript

var url1 = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=vpetrychuk&count=9'
var url2 = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=derickbailey&count=9'
var collection = new (Backbone.Collection.extend({
    url : url1,
    resetWithFilter : function(key, value) {
      var query = {};
      query[key] = value;
      this.reset(this.where(query));
    }
}));

// fetch initial data
collection.fetch({dataType:'jsonp'});

$(':button').on('click', function() {
  // change url and fetch another data
  collection.url = url2;
  collection.fetch({dataType:'jsonp'}).done(function(response) {
      console.log('items count before filter:', collection.length);
    // now reset collection with selected filter
    collection.resetWithFilter('id_str', '294429621640912896');
    console.log('items count after filter:', collection.length)
  });
});