Backbone.js hasChanged Model

In this article, we will see the Backbone.js hasChanged() model. The hasChanged() model checks if the model is changed or not, i.e. it will return a boolean value as true if the value is changed, otherwise returns a false value, since its last set, in order to set that value for an attribute in the model.

Syntax:

Backbone.Model.hasChanged(attribute);

Parameter Value:

attribute: This parameter specifies the property of the model.

Example 1: In this example, we will update the value of a model and check using the hasChanged() model.

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>     
</head> 
  
<body> 
    <script type="text/javascript"> 
      var Books = Backbone.Model.extend(); 
      var book = new Books({ 
          book_name: "css" 
      }); 
      document.write('Actual Values: '  
                     + JSON.stringify(book)); 
      document.write("<br>"); 
      document.write('Actual Value Changed ?: '  
                     + book.hasChanged()); 
      book.set('book_name', 'php'); 
      document.write("<br>"); 
      document.write("<br>"); 
      document.write('Changed Values: '  
                     + JSON.stringify(book)); 
      document.write("<br>"); 
      document.write('Actual Value Changed ?: '  
                     + book.hasChanged()); 
    </script> 
</body> 
</html>

Output:

Actual Values: {"book_name":"css"}
Actual Value Changed ?: false

Changed Values: {"book_name":"php"}
Actual Value Changed ?: true

Example 2: In this example, we will update the value of an empty model and check using the hasChanged() model.

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> 
</head> 
  
<body> 
    <script type="text/javascript"> 
      var Books = Backbone.Model.extend(); 
      var book = new Books({}); 
      document.write('Actual Values: '  
                     + JSON.stringify(book)); 
      document.write("<br>"); 
      document.write('Actual Value Changed ?: '  
                     + book.hasChanged()); 
      book.set('book_name', 'php'); 
      document.write("<br>"); 
      document.write("<br>"); 
      document.write('Changed Values: '  
                     + JSON.stringify(book)); 
      document.write("<br>"); 
      document.write('Actual Value Changed ?: '  
                     + book.hasChanged()); 
    </script> 
</body> 
</html>

Output:

Actual Values: {}
Actual Value Changed ?: false

Changed Values: {"book_name":"php"}
Actual Value Changed ?: true

Reference: https://backbonejs.org/#Model-hasChanged

HTML

HTML

Contact Us