Introduction
In this article we will learn about Backbone.js Model in depth. We know that Backbone.js follows the MV* pattern. The Model contains the interactive data and logic of this data. We use the model in Backbone to represent the concept of the object using its attributes. This article explains how to:
- Create a Model.
- Add properties to the Model.
- Add properties to a group.
- How to set a default property
- Change the Model property value.
- Get the Model property value.
A Model in backbone.js is for representing the data in our application. A Model consists of the connected data and connection among data for the web application. Now we just assume that here we will create the Person details that have the Name, Address, contact and so on.
First we will explain how to create a model in backbone.js.
//create a model
var PersonModel = Backbone.Model.extend({
});
//create new person detail based on the model
var firstPerson = new PersonModel();
In the code above we create the model, here we extend the object from the Backbone Model using "Backbone.Model.extent". We create the model name as "PersonModel". Then we create a new person based on our PersonModel using the "new PersonModel()". This new model has no property. So we will add the property to this model.
After creating the model we need to add a property to the model. So now we explain how to add the property with a value to the model.
//create new person detail based on the model
var firstPerson = new PersonModel();
//set the properties using ‘model.set()’
firstPerson.set('Name', 'Person1');
firstPerson.set('Address','Address1');
firstPerson.set('Contact','2345678');
//to test the result you can use ‘model.get()’ to get the value of each property
firstPerson.get('Name'); //It will be return the Person1
When we set the property to the model we need to use the syntax "model.set('property'.'value')". And when we need to find the value then we use the "model.get('property','value'). when we need to add a group of properties then we repeat it one by one, but it is not a good way. So now we describe how to add the property as a group.
Sometimes we need to add the property as a group so the following will show how to add a property as a group:
//create a model
var PersonModel = Backbone.Model.extend({
});
//store the property of person as JSON in detail variable
var detail = {
Name: 'Person1',
Address: 'Address1',
Contact: '2345678'
};
//create the new person for the above property
var firstPerson = new PersonModel(detail);
//to test the result you can use ‘model.get()’ to get the value of each property
firstPerson.get('Name'); //It will be return the Person1
When we add the property to a group then we first need to store all the property's values in a single variable as JSON and then create a new Person for these properties and pass the "detail" variable as a parameter. The same as shown in the code above.
Let's we explain here how to add the default value of the property to the model for when we cannot add the empty property to the model.
//create a model
var PersonModel = Backbone.Model.extend({
//Use the default for setting the default property
Defaults: {
Name: 'NoName',
Address:' NoAddress',
Contact: 'No Contact Number Available'
}
});
//create the new person without any property
var firstPerson = new PersonModel();
//to test the result you can use ‘model.get()’ to get the value of each property
firstPerson.get('Name'); //It will be return NoName
Sometimes we need to add the default property to the model, this means we cannot define the empty property to the model so we set the default property, such as when a user forgets to add a value to the property then it automatically assigns the default property value to the model.
Sometimes we want to change the value of the property so let's see how to change the value of the property.
//here we change the value of one property
firstPerson.set('Name':'PersonName'); //It will be return NoName
// now we change property value
firstPerson.set({'Name': 'New PersonName',Address: 'New Address'});
When we want to change the value of the property, we use the same method as for setting the value, such as "model.set('propert':'value')", in this syntax we change a single value. But we can change the group of the value at the same time such as "model.set('property1':'value', 'property2':'value')".
- Get the Value of Property from the model
After adding more values, obviously we need to find the value from the model so here we explain how to retrieve the property's value from the model.
Now we describe how to get the value from the model.
firstPerson.get('Name'); //It will be return Name of the person
firstPerson.get('Address');// It will be return the address of the person
When we need to get the value of the property from the model then we use the syntax "model.get('property');". In the preceding we used to find the two property values one is the name of the person and the other is the address of the person.