Backbone.js Collection.extend()

The extend method is used to extend the backbone's collection class to create your own collection. It provides instance properties and optional classProperties to be attached directly to the collection's constructor function.

Syntax:

Parameter explanation:

properties: Properties provide instance properties for the collection class .

classProperties: Class properties are attached to the collection's constructor function.

Let's take an example.

See this example:

<!DOCTYPE html>
   <head>
      <title>Extend Collection Example</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.1.2/backbone-min.js" type="text/javascript"></script>
   </head>
   <body>
      <script type="text/javascript">
      	//The model 'MyTeam' includes default values and  extended using the Backbone.Model class
         var MyTeam = Backbone.Model.extend({
            defaults: {
               player: "Dhyanchand",
               country: "India"
            },
         });

         //'MyTeam1' is an instance of the collection
         var MyTeam1 = Backbone.Collection.extend({
            model: MyTeam  //model 'MyTeam' is specified for a collection by overriding the 'model' property
         });

         //The collection 'MyTeam1' is instantiated by using new keyword
         var myval=new MyTeam1({});

         //The JSON.stringify() method returns values of collection in the JSON format
         document.write("The values in the collection are: ",JSON.stringify(myval));
      </script>
   </body>
</html>

Test it Now

Output:

Save the above code in extend.html file and open this file in a new browser.