In this article, we will learn few more concepts of collection in Backbone.js
Demystify Backbone.js: Implement Collection in Backbone.js
–Part-10
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 view complete article series here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
Part:-7
Part:-8
at() function to get object by index
We can fetch particular object from collection using at()
function, at() function takes one index as argument. The indexing starts from
‘0’ like array.
<%@ 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 person = Backbone.Model.extend({
defaults: {
name: 'Sourav',
surname: 'Kayal'
}
});
//create object of person class
var p1 = new person({});
var p2 = new person({});
//create object of Collection by passing model name
var pc = Backbone.Collection.extend({
model:person
});
var col = new pc;
col.add(p1, p2);
var p = col.at(0);
console.log('Name:- ' + p.get('name'));
console.log('Surname:- ' + p.get('surname'));
</script>
</form>
</body>
</html>
In this example we are getting 0th element from
the “pc” collection then we are printing name and surname property of it. Here
is sample output of above example.
Fetch value from collection using “cid”
The beauty of object of any Backbone.js Model is that one id
called “cid” automatically assign with each and every object. As this is one type of identity element, we
can select object from collection using “cid” .In this example we are print the
“cid” of 0th element from Model Collection and then we are accessing
that object using it’s “cid” property.
<%@ 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'
}
});
//create object of person class
var p1 = new person({});
var cid = p1.cid;
console.log('cid of first object:- ' + p1.cid);
var p2 = new person({});
//create object of Collection by passing model name
var pc = Backbone.Collection.extend({
model:person
});
var col = new pc;
col.add(p1, p2);
var p = col.getByCid(cid)
console.log('Name:- ' + p.get('name'));
console.log('Surname:- ' + p.get('surname'));
</script>
</form>
</body>
</html>
Here is sample output of above code example.
Iterate collection using each() function
If we want to print all the Model object from Backbone.js
Collection, we can use each() callback function. This function will traverse
all the Collection element/object. Have a look on below example.
<%@ 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'
}
});
//create object of person class
var p1 = new person({});
var p2 = new person({});
//create object of Collection by passing model name
var pc = Backbone.Collection.extend({
model: person
});
var col = new pc;
col.add(p1);
col.add(p2);
console.log('Number of Item in Collection:- ' + col.length);
col.each(function (model) {
console.log('Name:- ' + model.get('name'));
console.log('Surname:- ' + model.get('surname'));
});
</script>
</form>
</body>
</html>
We are getting name and surname property of each object
which we have pushed to Collection.
Conclusion:-
In this article we have learned few functions to manipulate
Collection data in Backbone.js. Hope you have learned to process Collection
data. In coming article we will understand few more concepts on the same.