Backbone.js models Collection

Last Updated : 21 Jul, 2022

The Backbone.js models Collection is used to access the JavaScript array of models inside the collection. The model object can be accessed with the use of ‘get’ or ‘at’ but we can use models to direct reference to the array.

Syntax:

collection.models;

Parameters: It doesn’t take any parameters.

Example 1: In this example, we will illustrate the Backbone.js models Collection. Here we will see the model’s attribute of collection.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS models 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 models collection</h3> 
      
    <script type="text/javascript"> 
        var Novel = Backbone.Model.extend(); 
  
        var books = Backbone.Collection.extend({ 
            model: Novel 
        }); 
  
        var Library = new books(); 
  
        Library.add({ title: 'sita', author: 'amish tripathi' }) 
  
        Library.add({ Name: 'maus' }) 
  
        console.log(Library); 
    </script> 
</body> 
  
</html>

Output:

Backbonejs models Collection

Example 2: In this example, we will use Collection.models property of Collection to reference an array of models.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS models 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 models collection</h3> 
      
    <script type="text/javascript"> 
        function print(x, y) { 
            document.write(` ${y} : ${JSON.stringify(x)} <br>`); 
        } 
  
        var Book = Backbone.Model.extend({  
            default: { id: '', name: '' } }); 
  
        var books = Backbone.Collection.extend({ 
            model: Book, 
        }); 
  
        var Library = new books(); 
  
        var b1 = new Book({  
            title: "Ram",  
            Author: "Amish Tripathi"  
        }); 
          
        var b2 = new Book({  
            title: "Lolita",  
            Author: "Vladimir Nabokov"  
        }); 
          
        Library.add(b1); 
        Library.add(b2); 
        console.log(Library) 
        _.each(Library.models, print) 
    </script> 
</body> 
  
</html>