Skip to content
Related Articles

Related Articles

How to Create a Model in Backbone.js ?

View Discussion
Improve Article
Save Article
Like Article
  • 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>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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=
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            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>
            type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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=
            type="text/javascript">
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            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>


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!