Backbone.js constructor / initialize Collection
Last Updated :
25 Oct, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Backbone.js constructor/initialize Collection
</title>
<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>
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Backbone.js constructor/initialize Collection
</title>
<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>
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>
|
Output:
Reference: https://backbonejs.org/#Collection-constructor
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...