Eduardo Garcia bio photo


Eduardo Garcia

Knowmad by definition

Location: Australia

Twitter Facebook  QQ交谈 Google+ Github LinkedIn Feed

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 ( as Rest Server.

The data delivered by the Rest Server is a list of Time Magazine Close Up images imported from their public feed You can check out what the data looks like at

This will show you how to bind jQuery events with BackboneJS Routes.

Libraries used.


Marionnete Timeline


$ git clone


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 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.

        "../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 '' + this.min + '/' + this.max;

    return Results;