Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you're not familiar with MVC, it's just a method for creating user interfaces. JavaScript functions make it much simpler to create a program's user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.
The collection's constructor/initialize is invoked indirectly when a new instance of a model is created and that model is passed inside the collection. We can override the model's object from the collection.
Syntax:
new Backbone.Collection(models, options)
Properties:
- models: It is used to specify the array of models which you want to pass initially.
- options: This parameter is used to define the collection kinds that the passing model object is directly attached to the collection. Abd this is optional.
Example 1: The code below demonstrates how we can initiate a collection through a model and override the model object.
<!DOCTYPE html>
<html>
<head>
<title>
Backbone.js constructor/initialize 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.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Backbone.js constructor/initialize Collection
</h3>
<script type="text/javascript">
var MyModel = Backbone.Model.extend({
defaults: {
title: "GFG",
about: "Computer portal for geeks"
},
initialize: function () {
console.log("The model has been initialised");
}
});
var MyCol = Backbone.Collection.extend({
model: MyModel
});
var update = new MyModel({
title: "GeeksForGeeks",
about: "Providing Quality Computer Science articles for Geeks"
});
var mycol = new MyCol([update]);
console.log("<br>" + JSON.stringify(mycol.models));
</script>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can initiate a collection through a model and override the model object and process that data from collection through a Function in the Model.
<!DOCTYPE html>
<html>
<head>
<title>
Backbone.js constructor/initialize 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.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Backbone.js constructor/initialize Collection
</h3>
<script type="text/javascript">
var MyModel = Backbone.Model.extend({
defaults: {
title: "GFG",
about: "Computer portal for geeks"
},
initialize: function () {
this.render()
},
render: function () {
console.log("Title : "
+ this.get('title'), "<br>About Us : "
+ this.get('about'));
},
});
var MyCol = Backbone.Collection.extend({
model: MyModel
});
var update = new MyModel({
title: "GeeksForGeeks",
about: "Providing Quality Computer Science articles for Geeks"
});
var mycol = new MyCol([update]);
</script>
</body>
</html>
