Backbone.js

Ankit Shukla
Email: ankit@knoldus.com
What is Backbone.js?
➢ Backbone.js is a lightweight JavaScript library that adds
structure to your client-side code. It ma...
Why we use Backbone.js?
●

It's smaller. There are fewer kilobytes for your browser or phone to
download, and less concept...
Models
➢ Backbone models contain data for an application as well as the
logic around this data.
➢ We can create models by ...
Cont...
Default values:
There are times when you want your model to have a set of
default values (e.g., in a scenario wher...
Cont...

var Todo =
Backbone.Model.extend
({
initialize: function(){
console.log('This model
has been initialized.');
}
View
➢ Contain the logic behind the presentation of the model’s data to
the user. They achieve this using JavaScript templ...
Cont...
What Is el?
el is basically a reference to a DOM element. There are two
ways to associate a DOM element with a vie...
Cont...
var TodosView = Backbone.View.extend({
tagName: 'ul',
className: 'container',
id: 'todos',
});
var todosView = new...
Collections
Collections
Collections are sets of models, and you create them by
extending Backbone.Collection .
Adding and ...
Cont...

var TodosCollection =
Backbone.Collection.exten
d({
model: Todo,
});
var a = new Todo({ title: 'Go
to Jamaica.'})...
Cont...
Retrieving Models
There are a few different ways to retrieve a model from a
collection. The most straight‐forward ...
Events
on() :- Bind a callback function to an object.
off() :- Remove a previously-bound callback function from an
object....
Cont...
ListenTo():-Tell an object to listen to a particular event on an other 0bject.
StopListening():-Tell an object to ...
Dependencies
Backbone’s only hard dependency is either Underscore.js ( >=
1.4.3) or Lo-Dash. For RESTful persistence, hist...
Thank You
Upcoming SlideShare
Loading in...5
×

Backbonejs

1,436

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,436
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Backbonejs"

  1. 1. Backbone.js Ankit Shukla Email: ankit@knoldus.com
  2. 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. 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. 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. 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. 6. Cont... var Todo = Backbone.Model.extend ({ initialize: function(){ console.log('This model has been initialized.'); }
  7. 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. 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. 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. 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. 11. Cont... var TodosCollection = Backbone.Collection.exten d({ model: Todo, }); var a = new Todo({ title: 'Go to Jamaica.'}),
  12. 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. 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. 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. 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. 16. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×