In-Depth Description of Backbone.js Model

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.

  •  Create Model

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.

  • Adding the property to the 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.

  • Adding the group of property in a model

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.

  • Set the default property to the Model

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.

  • Change the Property Value

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.