Backbone.js reset Collection

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:

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>

Output:

Reference: https://backbonejs.org/#Collection-reset

Backbone.js reset Collection

Explore