Backbone.js changed Model

Last Updated : 13 Jun, 2022

In this article, we will discuss Backbone.js changed model. The Backbone.js changed model is used to change the attributes that are changed after setting the attributes by using the set() method.

Syntax:

Backbone.Model.changed

Note: It takes no parameters.

Example 1: In this example, we will change the book_name:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
        Books = Backbone.Model.extend({ 
            defaults: { 
                book_name: 'Intro to html', 
                author: 'X' 
            }, 
            initialize: function () { 
                this.bind("update:book_name", function (model) { 
                    var bname = model.get("book_name"); 
                    var bauthor = model.get("author"); 
                }); 
            } 
        }); 
          
        var final = new Books(); 
        document.write("Actual Value: ", 
            final.get("book_name")); 
        document.write("<br>"); 
        final.set({ book_name: 'PHP Introduction' }); 
        document.write("Changed Value: ", 
            final.get("book_name"));   
    </script> 
</head> 
  
</html> 

Output:

Actual Value: Intro to html
Changed Value: PHP Introduction

Example 2: In this example, we will change the author

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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"> 
        Books = Backbone.Model.extend({ 
            defaults: { 
                book_name: 'Intro to html', 
                author: 'X' 
            }, 
            initialize: function () { 
                this.bind("update:book_name", function (model) { 
                    var bname = model.get("book_name"); 
                    var bauthor = model.get("author"); 
                }); 
            } 
        }); 
        var final = new Books(); 
        document.write("Actual Value: ", 
            final.get("author")); 
        document.write("<br>"); 
        final.set({ author: 'Y' }); 
        document.write("Changed Value: ", 
            final.get("author"));   
    </script> 
</head> 
  
<body></body> 
  
</html> 