It has the brief introduction of Backbone.js where you can learn the very basics of backbone.

1. Backbone.js
Ankit Shukla
Email: ankit@knoldus.com

2. What is Backbone.js?
➢ Backbone.js is a lightweight JavaScript library that adds
structure to your client-side code. It makes it easy to manage
and decouple concerns in your application, leaving you with
code that is more maintainable in the long term.
➢ Developers commonly use libraries like Backbone.js to create
single-page applications (SPAs).

3. Why we use Backbone.js?
●
It's smaller. There are fewer kilobytes for your browser or phone to
download, and less conceptual surface area.
●
Backbone does not force you to use a single template engine.
●
Backbone scales well, from embedded widgets to massive apps.
●
Backbone is a library, not a framework, and plays well with others.

4. Models
➢ Backbone models contain data for an application as well as the
logic around this data.
➢ We can create models by extending Backbone.Model as
follows:
var Todo = Backbone.Model.extend({});
Initialization:
The initialize() method is called when a new instance of a
model is created. Its use is optional

5. Cont...
Default values:
There are times when you want your model to have a set of
default values (e.g., in a scenario where a complete set of
data isn’t provided by the user). You can set these using a
property called defaults in your model.
Model.get()
Get the current value of an attribute from the model.
Model.set()
Model.set() sets a hash containing one or more attributes on
the model. When any of these attributes alter the state of the
model, a change event is triggered on it.

6. Cont...
var Todo =
Backbone.Model.extend
({
initialize: function(){
console.log('This model
has been initialized.');
}

7. View
➢ Contain the logic behind the presentation of the model’s data to
the user. They achieve this using JavaScript templating (for
example, Underscore microtemplates, Mustache, jQuery- tmpl,
and so on).
➢ Creating a new view is relatively straightforward and similar to
creating new models.To create a new view, simply use
Backbone.View .extend

8. Cont...
What Is el?
el is basically a reference to a DOM element. There are two
ways to associate a DOM element with a view: a new element
can be created for the view and subsequently added to the
DOM, or a reference can be made to an element that already
exists in the page.
If you want to create a new element for your view, set any
combination of the followingproperties on the view: tagName ,
id , and className . The framework will create a newelement
for you, and a reference to it will be available at the el property.
If nothing isspecified, tagName defaults to div .

9. Cont...
var TodosView = Backbone.View.extend({
tagName: 'ul',
className: 'container',
id: 'todos',
});
var todosView = new TodosView();
console.log(todosView.el);
The preceding code creates the following DOM element but
doesn’t append it to the
DOM.
<ul id="todos" class="container"></ul>

10. Collections
Collections
Collections are sets of models, and you create them by
extending Backbone.Collection .
Adding and Removing Models
var Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
}
});

11. Cont...
var TodosCollection =
Backbone.Collection.exten
d({
model: Todo,
});
var a = new Todo({ title: 'Go
to Jamaica.'}),

12. Cont...
Retrieving Models
There are a few different ways to retrieve a model from a
collection. The most straight‐forward is to use Collection.get() ,
which accepts a single id as follows:
var myTodo = new Todo({title:'Read the whole book', id: 2});
// pass array of models on collection instantiation
var todos = new TodosCollection([myTodo]);
var todo2 = todos.get(2);

13. Events
on() :- Bind a callback function to an object.
off() :- Remove a previously-bound callback function from an
object.
trigger() :-Trigger callbacks for the given event.
ourObject.on('dance', function(msg){
console.log('We triggered ' + msg);
});
// Trigger the custom event
ourObject.trigger('dance', 'our event');
ourObject.off('dance');

14. Cont...
ListenTo():-Tell an object to listen to a particular event on an other 0bject.
StopListening():-Tell an object to stop listening to events.
a.listenTo(b, 'anything', function(event){
console.log("anything happened"); });
a.listenTo(c, 'everything', function(event){
console.log("everything happened"); });
// trigger an event
b.trigger('anything'); // logs: anything happened
// stop listening
a.stopListening();
// A does not receive these events
b.trigger('anything');
c.trigger('everything');

15. Dependencies
Backbone’s only hard dependency is either Underscore.js ( >=
1.4.3) or Lo-Dash. For RESTful persistence, history support via
Backbone.Router and DOM manipulation with Backbone.View,
include json2.js, and either jQuery ( >= 1.7.0) or Zepto.

16. Thank You