Backbone.js mixin Collection

Last Updated : 18 Jul, 2022

The Backbone.js mixin Collection is function which is used to append attributes and function to base Backbone.Collection class. This function is used add generic function link Underscore Method.

Syntax:

Backbone.Collection.mixin( properties );

Properties: It accepts a single property as mentioned above and described below:

properties: It is the properties which we want to append in our base class.

In the below examples, we will use the Backbone.js mixin Collection.

Example 1: In this example, we will append some attributes and initialize method which will print itself.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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.4.1/backbone-min.js"
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS mixin Collection</h3> 
  
    <script type="text/javascript"> 
        Backbone.Collection.mixin({ 
            Collection_Name: 'Books', 
            Collection_size: 1000, 
            initialize: function () { 
                document.write( 
                  "Mixin append <br> collection : ", 
                  JSON.stringify(this) 
                ); 
            }, 
        }); 
  
        var geek = new Backbone.Collection(); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js mixin Collection

Example 2: In this example, we will add print method to the base class which will print given attribute of model in class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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.4.1/backbone-min.js"
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS mixin Collection</h3> 
  
    <script type="text/javascript"> 
  
        Backbone.Collection.mixin({ 
            print: function (models, iter) { 
  
                return _.map(models, function (a, b) { 
                    document.write(a.get(iter), "<br>") 
                }) 
  
            }, 
        }); 
  
        var geek = new Backbone.Collection([ 
            { author: "Narayana Murthy", 
             title: 'A Better India : A Better World' }, 
            { author: "Amrita Pritam", 
             title: 'A Revenue Stamp' }, 
            { author: "Lewis Carroll", 
             title: 'Alice in the Wonderland' }]); 
        geek.print('title') 
    </script> 
</body> 
  
</html>