Backbone.JS

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.

In this topic we discuss how to use the jQuery Gantt in a BackboneJS project.

The discussion in this topic is illustrated in the ..\PatternSamples\BackboneJS sample.

Create your project directory and structure it as you need. The sample above looks like this,

├── Scripts

│ ├── app

│ │ ├── EditExtenstion.js

│ │ └── main.js

│ │

│ ├── libs

│ │ ├── GanttDeps

│ │ │ ├── jquery-ui-1.11.4

│ │ │ │ └── jquery-ui.min.js

│ │ │ ├── Utils

│ │ │ │ └── date.js

│ │ │ ├── jquery-1.11.2.min.js

│ │ │ └── jquery.layout-latest.min.js

│ │ │

│ │ ├── require.js

│ │ ├── underscore.js

│ │ ├── backbone.js

│ │ └── RadiantQ-jQuery.Gantt.5.0.trial.min.js

│ │

│ ├── collections

│ │ └── collection.js

│ ├── models

│ │ └── model.js

│ ├── views

│ │ └── view.js

│ └── router.js

│

├── index.html

├── GanttControlSkeleton.json

├── localeStrings

│ └── en-US.js

│

└── css

├── External

├── Images

├── jQuery-ui-themes

├── VW.Grid.css

├── initGanttStyles.css

└── radiantq.gantt.default.css

In index.html, include the following code:

"data-main Entry Point", The data-main attribute is a special attribute that require.js will check to start script loading. Take a look at this RequireJS Docs for more information about this.
The templates to implement the gantt.
The config object as the global variable required before require.js is loaded and have the values applied automatically. Add the RadiantQ and dependant files in this config object. The above mentioned RequireJS Doc has more information.

<head>

requirejs.config({

"baseUrl": "Scripts/app",

"paths": {

"jquery": "../libs/GanttDeps/jquery-1.11.2.min",

"jquery-ui": "../libs/GanttDeps/jquery-ui-1.11.4/jquery-ui.min",

"jquery.layout": "../libs/GanttDeps/jquery.layout-latest.min",

"dateJS": "../libs/GanttDeps/Utils/date",

"resourceString": "../../localeStrings/en-US",

"underscore": "../libs/underscore",

"backbone": "../libs/backbone",

"router": "../router",

"models": "../models/model",

"views": "../views/view",

"collections": "../collections/collection",

"VWGrid": "../libs/VW.Grid.1.min.js",

"RadiantQ": "../libs/RadiantQ-jQuery.Gantt.5.0.min.js"

"shim": {

"jquery-ui": ["jquery"],

"jquery.layout": ["jquery", "jquery-ui"],

"backbone": ["underscore"],

"router": ["backbone"],

"models": ["router", "RadiantQ"],

"collections": ["models"],

"views": ["collections"],

"RadiantQ": ["jquery", "jquery-ui", "jquery.layout", "dateJS", "resourceString", "VWGrid"]

}

});

</script>

</head>

In main.js you should create a new router after the "models", "views", "collections" and "RadiantQ" files are loaded.

// The object to handle the extended models, views & collections.

var BB = {

Models: {},

Collections: {},

Views: {}

};

define(["jquery", "backbone", "models", "views", "collections", "RadiantQ"], function () {

// Starting the new router.

var router = new BB.Router();

Backbone.history.start();

});

In router.js you should create a new view of the Gantt.

// Backbone "router" is very useful for any application/feature that needs URL routing/history capabilities.

BB.Router = Backbone.Router.extend({

routes: {

"": "index"

index: function () {

// Create a new view for Gantt.

var ganttView = new BB.Views.GanttView();

}

});

In view.js:

BB.views.GanttView = Backbone.View.extend({

el: $("#gantt_container"),

model: BB.Models.Task,

initialize: function () {

this.collection = new BB.Collections.Tasks();

_.bindAll(this, 'render');

// To get the json data from given collection url,

this.collection.fetch({

converters: {

"text json": function (data) {

return $.parseJSON(data, true/*converts date strings to date objects*/, true/*converts ISO dates to local dates*/);

}

success: this.render

});

render: function () {

this.initGantt();

initGantt: function () {

// Gantt widget initialization & related codes goes here.

}

});

In model.js:

BB.Models.Task = Backbone.Model.extend({

defaults: {

ID: -1,

Name: "",

StartTime: new Date(),

Effort: RQTimeSpan.Zero,

PreferredStartTime: Date.MinValue,

IndentLevel: 0,

IsOpen: false,

ProgressPercent: 0,

Resources: "",

PredecessorIndices: "",

SortOrder: 0,

Description: "",

Tag: null,

Priority: 0

initialize: function () {

}

});

In collection.js:

BB.Collections.Tasks = Backbone.Collection.extend({

model: BB.Models.Task,

initialize: function () {

this.url = 'GanttControlSkeleton.json';

}

});