Implementation of a Timeline that enables the end user to change the date range of the timeline to get different results (via Ajax).
This example uses the Silex RSS Image Importer project (http://enzolutions.com/projects/silex_rss_importer_image) as Rest Server.
The data delivered by the Rest Server is a list of Time Magazine Close Up images imported from their public feed http://lightbox.time.com/category/closeup/feed/ You can check out what the data looks like at http://silex.7sabores.com/timeline/index.php/rest/covers.
This will show you how to bind jQuery events with BackboneJS Routes.
Libraries used.
DEMO : http://enzolutions.com/marionette-timeline/
Download
$ git clone git@github.com:enzolutions/marionette-timeline.git
Usage
You just need to play with Date Range select to get less or more results as you can see in the picture above.
Installing Rest Server
You must follow the instructions to install Rest Server http://enzolutions.com/projects/silex_rss_importer_image or you can implement your own Server to delivery diferent data.
Configuring Collections
Is required edit ResultCollection to set the proper URL for Rest Server as you can see in the following example.
define(["marionette",
"../models/ResultModel"], function(Marionette, Result ) {
var Results = Backbone.Collection.extend({
model: Result,
initialize : function(options) {
this.min = options.min;
this.max = options.max;
},
url: function() {
return 'http://silex.7sabores.com/timeline/rest/covers/' + this.min + '/' + this.max;
},
});
return Results;
});