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;"> neveropen </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;"> neveropen </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
