Introduction
This article is an introduction to backbone.js. It is a JavaScript library. Backbone.js is another JavaScript framework for creating MVC applications. It provides the structure to the web application through the model with the key value and custom events.
Backbone.js is used for client-side web applications that manage web applications. It is a JavaScript framework. It is gaining attention in the web development community among other frameworks. It uses the structure that is given by the JavaScript application.
Benefits of backbone.js
The following are the main benefits of the Backbone.js JavaScript library:
- Organizes the structure of the web application.
- Simplifies server-side persistence.
- Decouples the DOM from the web page's data.
- There are Views, Routers and Model data, all concisely organized.
- It provides Model, DOM and collection synchronization.
The following are the various core concepts of backbone.js:
- Models
- Collections
- Routers
- Views
- Namespaces
Model
Models in the backbone contain the interactive data and logic of this data for the web application. We use the backbone model to represent the concept of the object by including its attributes. To create the model we extend the "Backbone.Model". There are two model methods:
- Model.get(): It is used for easily accessing the model attribute.
- Model.Set(): It is used for allowing the attribute to be passed in the instance of the Model, it can be passed during initialization or at any time afterward.
Collections
The sets of models are called the collections; it is created by extending the "Backbone.collection". When we create a collection then we can pass the property specification for the models that are used by the collection as well as an instance property.
- Collection.get(): There are various ways of getting the model from the collection. The first is straightforward, by using the "Collction.get()" and the second is by getting the model by the id such as "collection.get(id)". The backbone collection doesn't have a set method, but is support for adding a new model using the add() method and removing the model using remove().
Routers
In the backbone, routers are used for connecting the URLs with the application event and managing the state of the application. For this, we use the # (hash) tag with the URL fragment or we can use the browser push state and history API.
Views
In the backbone the view is not for containing the markup for the application but they are to support the models. These models provide the logic for how they are to be represented to the user. This is done using JavaScript. For creating the view we use a straightforward way, like other sections, such as "Backbone.Views".
Namespaces
When we learn about Backbone there is a common area of namespaces. The basic idea behind the namespaces is that it avoids name collision with other objects or variables, These are in the global namespaces. These are important because they work as safeguards for your code from breaking the event of another page using the same variable as you are.
There are some namespaces for your models, views, routers and other components especially. The patterns are:
- Single global variable
- Object literals
- Nesting namespaces