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=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
<script src=
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=
type="text/javascript">
</script>
<script src=
type="text/javascript">
</script>
<script src=
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>
|
Output:
Backbone.js mixin Collection
Reference: https://backbonejs.org/#Collection-mixin