Models in Backbone.js

As discussed in my last session, backbone model contains your application’s state as well as the logic and the behavior.

Let’s understand what it means.

var myModel = Backbone.Model;

Here, myModel extends the backbone model to create an empty object. In short, myModel is a “Type” of Backbone.Model.

Another way to write above statements is:

var myModel = Backbone.Model.extend();
var myModel = Backbone.Model.extend({});

All the above objects will be identical, in the sense that they are types obtained from Backbone.Model.

Let’s look at another example.

var myModel1 = Backbone.Model;
var myVar1 = new myModel1();

Here, we have created an empty Model object, i.e. It is a Type derived from Backbone.Model.

We have created myVar1, which an object of type myModel.

We can set/get the dynamic properties to the myVar1 object using the getter/setter methods.

myVar1.set('property1', "value1");
console.log('property1 : ' + myVar1.get('property1'));

Let’s look at another example.

var myModel2 = Backbone.Model.extend();
var myVar2 = new myModel2({'property2':'value2'});
console.log('property2 : ' + myVar2.get('property2'));

In this example, we have set the property value to the myVar2 object at the time of initialization. So, this is an alternate to the ‘set’ method. Also, note the difference in the syntax of myModel2 declaration. Here, as explained earlier, we have used set of parenthesis while declaring the myModel2 of type Backbone.Model. In the below example, we are going to look into some Backbone.js features, such as:

1. Default property initialization
2. Constructor function
3. Member function

var myModel3 = Backbone.Model.extend({
//set the default properties here
defaults: {
 property3 : 'value3',
 },
 //constructor function for the model
 initialize: function(){
   console.log('Initializing the Model3...');
 }, 
 //member functions for the model
    memberFunction1 : function() {}, 
    memberFunction2 : function() {},
});
var myVar3 = new myModel3;
console.log('property3 : ' + myVar3.get('property3'));

In the above example, the ‘property3’ has been assigned with the default value. So, all the objects created using the myModel3 type will have the same value assigned to the property3. The value to the property3 can be overridden by using the set method. Also note the way myVar3 has been declared. This is another way of initializing the model type. Initialize is a constructor function, which can be used to instantiate model dependencies & do other initialization operations. Backbone models can have member functions, whose scope will be limited to the object of that type.

Let's have a quick look at few of the important model methods.

Set method

In order to dynamically add properties to the model objects, set method is used.

Syntax:

modelObject.set(‘propertyName’, ‘value’);

Ex.,

var modelType = Backbone.Model;
var myObject = new modelType();
myObject.set('message', "Hello World!");

Note: In case if specified property is already available, the older value will be overwritten with the new one.

Get method

In order to read the properties of the model objects, get method is used.

Syntax:

modelObject.get(‘propertyName’);

Ex.,

var modelType = Backbone.Model;
var myObject = new modelType();
myObject.set('message', "Hello World!");
console.log(myObject.get('message'));

Note 1: In case if specified property is not available, undefined response is returned.

Note 2: In Backbone.js, the properties are case-sensitive. i.e., Backbone will treat ‘message’ & ‘Message’ as two different properties.

Escape method

In order to escape the output html, this method can be used. Using this, XSS (Cross Site Scripting) attacks can be eliminated.

Syntax:

modelObject.escape(‘propertyName’);

Ex.,

var modelType = Backbone.Model;
var myObject = new modelType();
myObject.set('message', "alert(Hello World!)");
console.log(myObject.escape('message'));