Eduardo Garcia bio photo

enzo

Eduardo Garcia

Knowmad by definition

Location: Costa Rica

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 (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/

Marionnete 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;

});