In this article, we will learn more about collection in Backbone.js.
Demystify Backbone.js: Implement Collection in Backbone.js
–Part-11
This is “Demystify
Backbone.js” article series, here we are discussing all about Backbone.js. We
have understood the concept of Model and Collection of Backbone.js with
suitable example. You can visit our previous articles here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
Part:-7
Part:8
Part:-9
Part:-10
In this article we will learn to create Collection on fly in
Backbone.js. So far we have learned that Collection belongs to particular Mode,
but it’s not very true. We can implement Collection on fly , without
considering any particular Model class.
Create collection on fly/ Model Independent collection
This is the example to implement Collection without depend
on any particular Mode. In this sample code we have defined “personCollection”
and within that we are setting object. Those objects have common name and
surname property, but they does not belongs to any Model class of Backbone.js.
<%@ 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 personCollection = new Backbone.Collection([
{ name:'Sourav',surname:'Kayal'},
{ name: 'Ram', surname: 'Das' },
{ name: 'Nontey', surname: 'Banerjee' },
{ name: 'Manish', surname: 'Khanra' },
]);
console.log('Number of person:- ' + personCollection.length);
</script>
</form>
</body>
</html>
Here is output of above example.
Fetch part of collection using pluck() method
In our previous example we have learned to create Collection
on fly. In this example we will learn to fetch particular property set of
Collection object using pluck() method. Pluck() is one method of Collection
class which takes property name as parameter of Model object. Here is code
implementation for 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 personCollection = new Backbone.Collection([
{ name:'Sourav',surname:'Kayal'},
{ name: 'Ram', surname: 'Das' },
{ name: 'Nontey', surname: 'Banerjee' },
{ name: 'Manish', surname: 'Khanra' },
]);
var names = personCollection.pluck("name");
console.log(JSON.stringify(names));
</script>
</form>
</body>
</html>
In output we are seeing that only the “name” property has
fetched from Collection.
Conclusion:-
In this short article we have learned the use of pluck()
method and type less Collection of Backbone.js. Those are useful to develop
application using Backbone.js. In coming article we will understand few more
concepts of Collection.