Open In App

Backbone.js comparator Collection

Improve
Improve
Like Article
Like
Save
Share
Report

The Backbone.js comparator Collection is the property of the collection’s model which is used to sort all the models in the collection. By default, there is no comparator for a collection. Whenever a new model is added to the collection comparator helps to sort the models.  

Syntax: 

collection.comparator

Properties: It does not accept any arguments. 

Example 1: In this example, we will illustrate the Backbone.js comparator Collection. Here we will define a comparator and add models to the collection and observer the order of models. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS comparator collection</title>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>BackboneJS Collection comparator</h3>
     
    <div id='hello'></div>
     
    <script type="text/javascript">
        var book = Backbone.Model;
        var books = new Backbone.Collection;
        books.comparator = 'year';
        books.add(new book({
            year: 2002, id: 'b33',
            title: "journey of life"
        }));
        books.add(new book({
            year: 2003, id: 'b43',
            title: "End of road"
        }));
        books.add(new book({
            year: 2001, id: 'b45',
            title: "Way to no where"
        }));
        document.write(JSON.stringify(books));
    </script>
</body>
 
</html>


Here in the below, we can see the models are sorted according to the year attributes of models. 

Output:

Backbone.js comparator collection

Example 2:  In this example, we will see that if we change the values of attributes of models, then the collection is not sorted according to the comparator we have to explicitly have to sort the collection.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS comparator collection</title>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>BackboneJS Collection comparator</h3>
     
    <div id='hello'></div>
     
    <script type="text/javascript">
        var book = Backbone.Model;
        var b1 = new book({
            year: 2002, id: 'b33',
            title: "journey of life"
        });
        var b2 = new book({
            year: 2001, id: 'b45',
            title: "Way to no where"
        });
        var b3 = new book({
            year: 2005, id: 'b29',
            title: "How to start"
        });
        var b4 = new book({
            year: 2004, id: 'b44',
            title: "The boy with broken heart"
        })
        var books = new Backbone.Collection;
        books.comparator = 'id';
        books.add(b1);
        books.add(b2);
        books.add(b3);
        books.add(b4);
        document.write('<b>Before changing the '
            + 'value of attributes : </b> ');
        document.write(books.pluck('id'), '<br>')
        b1.set('id', '21');
        b2.set('id', '22');
        b3.set('id', '23');
        b4.set('id', '24');
        document.write('<b>after changing the '
            + 'value of attributes : </b>');
        document.write(books.pluck('id'), '<br>')
        books.sort();
        document.write('<b>Sorted collection : </b>');
        document.write(books.pluck('id'))
    </script>
</body>
 
</html>


Output:

Backbone.js comparator collection

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



Last Updated : 18 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads