Time Tracker Backbone JS App

UDSSL Time Tracker uses Backbone JS to structure front end of the plugin.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone JS website Read more about Backbone.js


Five Data Models are being used in UDSSL Time Tracker Backbone App.

  • Timeslot
  • Category
  • Project
  • Task
  • Payment

Below shown is the Backbone model used to define the TimeSlots with some default values.

var app = app || {}
app.TimeSlot = Backbone.Model.extend({
  defaults: {
    t_start: "2013-10-25 15:00:00",
    t_end: "2013-10-25 15:30:00",
    t_duration: "30",
    t_category: "Category 1",
    t_project: "Project 1",
    t_task: "Task 1",
    t_description: "Sample Description",


Five Collections are being used in Time Tracker app, each corresponding to the data models. Collections fetch time data from the JSON API and handles collective manipulation of data models.

Example of fetching data for Time Tracker App and initializing major views in the app. See below code: Timeslot, Category, Project and Task data are fetched through the initialization of Backbone collections.

var app = app || {}
var ENTER_KEY = 13
$(function () {
  app.TimeSlots = new TimeSlots()
  app.Categories = new Categories()
  app.Projects = new Projects()
  app.Tasks = new Tasks()

  new app.TimeTrackerView()
  new app.TaskManageView()
  new app.ProjectManageView()
  new app.CategoryManageView()

Undescore JS

UDSSL Time Tracker uses Underscore JS as the templating solution.

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.

Underscore JS website Read more about Underscore.js Underscore

Tip: You can find Underscore.js templates in ‘app/templates/’ directory. Shown below are the Underscore Templates used for Task Select Template and Time Slot Template.

<script type="text/template" id="task-select-template">
    <select id="task-selector">
       <% _(tasks).each(function(task) {  %>
            <% if(project == task.ta_project || 'none' == project){  %>
                <%= task.ta_name %>
            <% } %>
        <% }); %>

<script type="text/template" id="time-slot-template">
    <td className="t_start_label" ><%- t_start %>
    <td className="t_end_label" ><%- t_end %>
    <td className="t_duration_label" ><%- t_duration %>
    <td className="t_category_label" ><%- t_category %>
    <td className="t_project_label" ><%- t_project %>
    <td className="t_task_label" ><%- t_task %>
    <td className="t_description_label" ><%- t_description %>

Written by UDSSL