How to Create a Model in Backbone.js ?

Last Updated : 26 Apr, 2022

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

A Model is created simply by extending Backbone.Model

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

Instantiating Models: A Model is Instantiated using the “new” keyword.

var geek = new Backbone.Model.extend();

In this article we will see about the below models in backbone.js:

get() [ model.get(attribute) ]
set() [ model.set(attribute) ]
unset() [ model.unset(attribute) ]
escape() [ model.escape(attribute) ]

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
  
    <script type="text/javascript"> 
        var Geek = Backbone.Model.extend({ 
            initialize: function () { 
                document.write("Welcome to GeeksforGeeks"); 
            }, 
        }); 
  
        var geek = new Geek(); 
    </script> 
</head> 
  
<body></body> 
  
</html>

Output:

So, initialize() is triggered whenever you create a new instance of a model (models, collections, and views work the same way). It is similar to the constructor in a class.

Let’s understand different models in detail.

Get: model.get(attribute). It is used to get the value of an attribute from the model.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
        type="text/javascript"> 
    </script> 
  
    <script type="text/javascript"> 
        Learner = Backbone.Model.extend({ 
  
            defaults: { 
                name: 'mahesh', 
                age: 19, 
                position: 'JavaScriptDeveloper' 
            }, 
        }); 
  
        var Geek = new Learner(); // New object is created 
  
        // Name is displayed 
        document.write("name: ", Geek.get('name'), "<br/>"); 
          
        // Age is displayed 
        document.write("age: ", Geek.get('age'), "<br/>"); 
          
        // Position is displayed 
        document.write("position: ", Geek.get('position'), "<br/>"); 
          
        var geek = new Geek(); 
    </script> 
</head> 
  
<body></body> 
  
</html>

Output:

Set: model.set(attributes,[options]): It is used to update or set a value to the keys.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
        var Geek = Backbone.Model.extend(); 
        var learner = new Geek(); 
        learner.set({ fname: "Mahesh ", lname: "Gaikwad" }); 
        document.write("Name of the learner: ", 
            learner.get("fname"), 
            learner.get("lname")); 
    </script> 
</head> 
  
<body></body> 
  
</html>

Output:

Unset: model.unset(attribute, [options]): Unset method removes an attribute by deleting it from the internal attributes hash.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
    <script type="text/javascript"> 
        var Organisation = Backbone.Model.extend(); 
        var organisation = new Organisation(); 
        organisation.set({ org_name: "gfg.org" }); 
        document.write( 
            "<b>Before using unset method , Organisation name is:</b> ", 
            organisation.get("org_name") 
        ); 
        organisation.unset("org_name"); 
        document.write("<br>"); 
        document.write( 
            "<b>After unset, Organisation name is:</b>", 
            organisation.get("org_name") 
        ); 
    </script> 
</head> 
  
<body></body> 
  
</html>

Output:

Escape: model.escape(attribute) . The Backbone.js escape() Model is similar to get function but it returns the HTML-escaped version of a model’s attribute.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js | Model</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript"> 
     </script> 
    <script type="text/javascript"> 
        var Student = Backbone.Model.extend(); 
        var student = new Student(); 
        student.set({ name: "Mahesh Gaikwad" }); 
        document.write(student.escape("name")); 
    </script> 
</head> 
  
<body></body> 
  
</html>