In this article, we will learn the concept of collection in Backbone.js
Demystify Backbone.js: Implement Collection in Backbone.js
–Part-9
This is “Demystify
Backbone.js” article series, here we are discussing all about Backbone.js. We
have understood the concept of Model of Backbone.js with suitable example. You
can visit previous articles here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
Part:-7
Part:-8
In this article
associated with coming few of this series, we will learn the concept of
Collection in Backbone.js. We know that Model is very similar with class in any
object oriented programming language and Collection in Backbone.js is nothing
but a set of similar type Model. We can store a set of Model within Collection.
First we will know the basic structure of Collection in Backbone.js.
Example of simple collection
Like Model , we have to
extend collection from Collection class of Backbone.js library. In this example
we have extend “personCollection” from Backbone’s Collection library.
var personCollection =
Backbone.Collection.extend({
model: person
});
Implement simple
collection and push Model object
In our previous example, we
have learned to create simple collection and in this example we will store few
objects of Model class into it. At first we have created “person” model and then
we are creating personCollection collection.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var person = Backbone.Model.extend({
defaults: {
name: 'Sourav',
surname: 'Kayal'
}
});
var personCollection = Backbone.Collection.extend({
model: person
});
//create object of person class
var p1 = new person({});
var p2 = new person({});
//create object of personCollection
var pc = new personCollection();
//add object to person collection
pc.add(p1);
pc.add(p2);
console.log('Number of object in collection' + pc.length);
</script>
</form>
</body>
</html>
We are setting “person” as
model property of “personCollection” collection and after that we are adding p1
and p2 object to “personCollection” collection using add() method. Here we are
printing the length of collection and it will show us the number of object(s)
it contains. The output is showing 2 ,means there are 2 objects in this
collection.
Another way to store object in collection
This is another way to store data in collection. In this example we are not using add() method to add object within collection. In time of collection object creation we are initializing the objects into it. Here is sample implementation of that.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var person = Backbone.Model.extend({
defaults: {
name: 'Sourav',
surname: 'Kayal'
}
});
var personCollection = Backbone.Collection.extend({
model: person
});
//create object of person class
var p1 = new person({});
var p2 = new person({});
//create object of personCollection
var pc = new personCollection([p1,p2]);
console.log('Items in Collection:- ' + pc.length);
</script>
</form>
</body>
</html>
Here is output of above example.
Set object in time of definition
It is possible to set object in time of collection definition. In this example we will add few type less objects within collection. Each object has two properties called "name" and "age". Have a look on below example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var personCollection = new Backbone.Collection([
{ name: "Sourav", age:25 },
{ name: "ajay", age:26 },
{ name: "Manish", age:24 }
]);
console.log(JSON.stringify(personCollection));
</script>
</form>
</body>
</html>
We are seeing that the three objects has initiated within "personCollection" collection. We are printing it in JSON format.
Conclusion:-
In this article we have learned various approaches to configure collection in Backbone.js. Hope you understood them. In coming article we learn few more concepts of collection in Backbone.js.