Implementation of Timeline Date Range Filter using MarionetteJS
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
collections
css
images
js
layouts
models
modules
templates
vendor
views
README.md
index.html

README.md

Marionette Timeline

Implementation of a Timeline enabled to end user change the Date Range of Timeline to get differnt results via Ajax.

This example use the project http://enzolutions.com/projects/silex_rss_importer_image as Rest Server.

The data develired by Rest Server is list of Time Magazine Close Up images imported from http://lightbox.time.com/category/closeup/feed/ you can check the data at http://silex.7sabores.com/timeline/index.php/rest/covers.

Inside you can find how bind jQuery events with BackboneJS Routes.

Libraries used.

DEMO : http://enzolutions.com/marionette-timeline/

Marionnete Timeline

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;

});