Backbone.js model Collection

Last Updated : 12 Dec, 2022

The Backbone.js model Collection is the property that specifies the model collection. If this property is defined then we can pass objects, an array of objects, and uses options add, create and reset then the attributes will be converted into a model of the proper type using provided options.

Syntax:

collection. model( attrs, options ) ;

Parameters:

attrs: These are the attributes of the model passed.
options: These are the optional parameter that is passed to the model when creating a model with attrs.

Example 1: In this example, we will illustrate the Backbone.js model Collection. We will define the model property of the collection which has default attributes and write them in the document.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS model 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 model collection</h3>
     
    <script type="text/javascript">
        var Book = Backbone.Model.extend({
            defaults: {
                title: "Ram",
                Author: "Amish Tripathi",
            },
        });
 
        var books = Backbone.Collection.extend({
            model: Book,
        });
 
        var Library = new books({});
 
        document.write(JSON.stringify(Library));
    </script>
</body>
 
</html>

Output:

Backbone.js model Collection

Example 2: In this example, we will define the polymorphic model for the collection. Polymorphic model are model which are defined according to the condition which are attributes present in the model.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS model 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 model collection</h3>
     
    <script type="text/javascript">
        var Novel = Backbone.Model.extend();
        var comic = Backbone.Model.extend();
 
        var books = Backbone.Collection.extend({
            model: function (attr, option) {
                if (attr.title) return new Novel(attr);
                else return new comic(attr);
            },
        });
 
        var Library = new books();
 
        Library.add({ title: "sita", author: "amish tripathi" });
 
        Library.add({ Name: "maus" });
 
        document.write(JSON.stringify(Library));
    </script>
</body>
 
</html>