Backbone.js reset Collection

Last Updated : 21 Jul, 2022

The Backbone.js reset Collection is used to replace the whole list of models with a new list of models or attributes hash. This function returns newly set models in the collection. We can pass null in place of models to make the collection empty.

Syntax:

collection.reset( models, options );

Parameters:

models: This parameter specifies the instance of model and array of models which will be added to the collection in place of old models.
options: This parameter specifies the optional model which is going to add to the collection.

Example 1: In this example, we will illustrate The Backbone.js reset Collection. We will add a new instance of a model which will replace the old models in the collection.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS reset collection</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.2.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS reset collection</h3> 
      
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
  
        var books = Backbone.Collection.extend({ 
            model: Book 
        }); 
  
        var Library = new books(); 
  
        Library.add({  
            title: "catch-22",  
            Author: "Joshep Heller"  
        }); 
          
        Library.add({  
            title: "Invisible Man",  
            Author: "Ralph Ellison"  
        }) 
  
        document.write("Old Books are : <br> "); 
        document.write(JSON.stringify(Library), '<br>'); 
  
        var b1 = new Book({  
            title: "The palace of Illusion",  
            Author: "Chitra Banerjee"  
        }); 
          
        var b2 = new Book({  
            title: "Wings of fire",  
            Author: "A. P. J. Abdul Kalam"  
        }); 
  
        Library.reset([b1, b2]); 
  
        document.write("<br>New Books are : <br> "); 
        document.write(JSON.stringify(Library)); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js reset Collection

Example 2: In this example, we will use null in place of the new model to make the collection empty.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS reset collection</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.2.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS reset collection</h3> 
      
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
  
        var books = Backbone.Collection.extend({ 
            model: Book 
        }); 
  
        var Library = new books(); 
  
        Library.add({  
            title: "catch-22",  
            Author: "Joshep Heller"  
        }); 
  
        Library.add({  
            title: "Invisible Man",  
            Author: "Ralph Ellison"  
        }) 
  
        Library.add({  
            title: "The palace of Illusion",  
            Author: "Chitra Banerjee"  
        }) 
  
        if (Library.length > 0) { 
            document.write("Books are : <br> "); 
            document.write(JSON.stringify(Library), '<br>'); 
        } 
  
        Library.reset(null); 
  
        if (Library.length == 0) { 
            document.write("<br>After Clearing all the " 
                + "models of Collection is :  <br> "); 
            document.write(JSON.stringify(Library)); 
        } 
    </script> 
</body> 
  
</html>