Backbone , Backbone.js

Backbone.js


Backbone.js is a light weight JavaScript library that allows to develop and structure client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.


Main feature for me: Backbone communicates via events, so that you won't end up the application in mess. Your code will be cleaner, nicer and more maintainable.

  • Backbone provides various building blocks such as models, views, events, routers and collections for assembling client side web applications.
  • When model changes, it automatically updates the HTML of your application.

Dependencies

  • Underscore.js
  • jQuery.js
  • json2.js

ELEMENTS

Router


  •  It is an URL representation of application's objects. 
  • Router is required when web applications provide linkable, bookmarkable, and shareable URL's for important locations in the app.

View

  • Backbone.js views are responsible for how and what to display from our application and they don't contain HTML markup for the application.
  • views represents the user interface which is responsible for displaying the response for user request done by using the router.

Events

  • binding and triggerring custom events. 

Model

  • contain data of an application and logic of the data and represents basic data object 
  • retrieved from and saved to data storage
  • Model takes the HTTP request from the events passed by the view using the router and synchronizes the data from database and send the response back to the client.

Collection

  • Collection is a set of models which binds events, when the model has been modified in the collection. 
  • It also takes the request from the view, bind events and synchronizes the data with requested data and send response back to the HTTP client.

Data Source

  • It is the connection set up to a database from a server and contains the information which is requested from the client

EVENTS

1 on
It binds an event to an object and executes the callback whenever an event is fired.
2 off
It removes callback functions or all events from an object.
3 trigger
It invokes the callback functions for the given events.
4 once
It extends backbone.Model class while creating your own backbone Model.
5 listenTo
It informs one object to listen an event on another object.
6 stopListening
It can be used to stop listening to events on the other objects.
7 listenToOnce
It causes the listenTo occur only once before the callback function is being removed.

Catalog of Events

Here's a list of all of the built-in events that Backbone.js can fire. You're also free to trigger your own events on Models and Views as you see fit.
  • "add" (model, collection, options) — when a model is added to a collection.
  • "remove" (model, collection, options) — when a model is removed from a collection.
  • "update" (collection, options) — single event triggered after any number of models have been added or removed from a collection.
  • "reset" (collection, options) — when the collection's entire contents have been replaced.
  • "sort" (collection, options) — when the collection has been re-sorted.
  • "change" (model, options) — when a model's attributes have changed.
  • "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
  • "destroy" (model, collection, options) — when a model is destroyed.
  • "request" (model_or_collection, xhr, options) — when a model or collection has started a request to the server.
  • "sync" (model_or_collection, resp, options) — when a model or collection has been successfully synced with the server.
  • "error" (model_or_collection, resp, options) — when a model's or collection's request to the server has failed.
  • "invalid" (model, error, options) — when a model's validation fails on the client.
  • "route:[name]" (params) — Fired by the router when a specific route is matched.
  • "route" (route, params) — Fired by the router when any route has been matched.
  • "route" (router, route, params) — Fired by history when any route has been matched.
  • "all" — this special event fires for any triggered event, passing the event name as the first argument.


MODELS

S.N. Methods & Description
1 extend
It extends backbone.Model class while creating your own backbone Model.
2 initialize
When model instance is created, the class's constructor gets called and it is invoked 
by defining initialize function when model is created.
3 get
It gets value of an attribute on the model.
4 set
It sets the value of an attribute in the model.
5 escape
It is similar to get funtion, but returns the HTML-escaped version of a model's attribute.
6 has
Returns true, if attribute value defined with non-null value or non-undefined value.
7 unset
It removes an attribute from a backbone model.
8 clear
Remove all attributes, including id attribute from a backbone model.
9 id
It uniquely identify the model entity, that might be manually set when model is created or populated when model is saved on the server.
10 idAttribute
Defines model's unique identfier which contains the name of the member of the class which will be use as id.
11 cid
It is auto generated client id by Backbone which uniquely identify the model on the client.
12 attributes
Attributes defines property of a model.
13 changed
Changes all the attributes that have changed after setting the attributes using set() method.
14 defaults
Sets a default value to a model, that means if user doesn't specify any data, the model won't fall with empty property.
15 toJSON
Returns copy of the attributes as an object for JSON stringification.
16 sync
It is used to communicate with the server and to represents state of a model.
17 fetch
Accept the data from the server by delegating sync() method in the model.
18 save
Saves the data of the model by delegating to sync() method which reads and save the model every time when Backbone calls it.
19 destroy
Destroys or removes the model from the server by using the Backbone.sync method which delegates the HTTP "delete" request.
20 validate
If input is invalid, it returns specified error message or if input is valid, it doesn't specify anything and simply display the result.
21 validationError
It display validation error, if validation fails or after the invalid event is triggered.
22 isValid
It checks the model state by using validate() method and also checks validations for each attributes.
23 url
It is used for the instance of the model and returns url where model's resource is located.
24 urlRoot
Enables the url function by using the model id to generate the URL.
25 parse
Returns the model's data by passing the through the response object and represents the data in JSON format.
26 clone
It is used to create deep copy of a model or to copy one model object to another object.
27 hasChanged
Returns true, if attribute gets changed since the last set.
28 isNew
Determines whether the model is a new or existing one.
29 changedAttributes
It returns the model's attributes that have changed since the last set or else becomes false, if there are no attributes.
30 previous
It determines the previous value of the changed attribute.
31 previousAttributes
Returns state of the all attributes prior to last change event.

COLLECTIONS

S.N. Methods & Description
1 extend
Extends the backbone's collection class to create an own collection.
2 model
To specify the model class, we need to override the model property of the collection class.
3 initialize
When model instance is created, it is invoked by defining initialize function when the collection is created.
4 models
Array of models which are created inside of the collection.
5 toJSON
Returns the copy of the attributes of a model using JSON format in the collection.
6 sync
It represents the state of the model and uses Backbone.sync to display the state of the collection.
7 add
Add a model or array of models to the collection.
8 remove
Removes a model or array of models from the collection.
9 reset
It resets the collection and populates with new array of models or will empty the entire collection.
10 set
It is used to update the collection with set of items in a model. If any new model is found, the items wiil be added to that model.
11 get
It is used to retrieve the model from a collection by using idor cid.
12 at
Retrieve the model from a collection by using specified index.
13 push
It is similar to add() method which take array of models and push the models to the collection.
14 pop
It is similar to remove() method which take array of models and remove the models from the collection.
15 unshift
Add specified model at the beginning of a collection.
16 shift
It removes the first item from the collection.
17 slice
Displays the shallow copy of the elements from the collection model.
18 length
Counts the number of models in the collection.
19 comparator
It is used to sort the items in the collection.
20 sort
Sorts the items in the collection and uses comparator property in order to sort the items.
21 pluck
Retrieves the attributes from the model in the collection.
22 where
It is used to display the model by using the matched attribute in the collection.
23 findWhere
It returns the model, that matches the specified attribute in the collection.
24 url
It creates an instance of the collection and returns where resource is located.
25 parse
Returns the collection's data by passing the through the response object and represents the data in JSON format.
26 clone
It returns the shallow copy of the specified object.
27 fetch
It extracts the data from the model in the collection using the sync method.
28 create
It creates new instance of the model in the collection.

0 pensamientos:

Post a Comment

feedback!