In this article series, we will understand more concepts of collection in Backbone.js.
Demystify Backbone.js: Implement Collection in Backbone.js
–Part-12
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 whole series here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
Part:-7
Part:-8
Part:-9
Part:10
Part:-11
Bind method in collection
It’s very much necessary to implement such notification
mechanism which will fire when specific data will get change. For example we
want to generate a trigger when people will change some data in Backbone.js. For
that we have to bind some function with Model data. In this example we have
bind “add” method with “person” collection.
<%@ 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 = new Backbone.Collection;
person.bind("add", function (person) {
console.log("Name Added:-" + person.get("name"));
});
person.add([
{ name: "Sourav" },
{ name: "Manish" }
]);
</script>
</form>
</body>
</html>
The advantage is that, when we will add any object to
“person” collection this bonded method will get fire. In this example we are
adding two Model objects to this collection and here is output.
Bind ‘delete’ method to collection
In previous example we have seen to bind function in “add”
event with Backbone.js Collection. In this example we will learn to bind
“delete” event with Collection. Try to understand below code.
<%@ 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 = new Backbone.Collection;
person.bind("add", function (person) {
console.log("Name Added:-" + person.get("name"));
});
person.bind('remove', function (person) {
console.log("Name " + person.get('name')+ ' Deleted from collection');
});
person.add([
{ name: "Sourav" },
{ name: "Manish" }
]);
person.remove(person.at(0).cid);
</script>
</form>
</body>
</html>
At first we are adding two items/ objects and then we are
removing one object using remove() function with the help of “cid” . This “cid”
or any indexing mechanism is needed to remove any object from collection. Here
is output of above example.
Unbind any method to collection.
It’s just opposite to bind method. We can unbind any
specific method from Collection. The unbind() function takes event name as
parameter.
<%@ 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 = new Backbone.Collection;
person.bind("add", function (person) {
console.log("Name Added:-" + person.get("name"));
});
person.bind('remove', function (person) {
console.log("Name:- " + person.get('name')+ ' Deleted from collection');
});
//unbind add method from collection
person.unbind('add');
person.add([
{ name: "Sourav" },
{ name: "Manish" }
]);
person.remove(person.at(0).cid);
</script>
</form>
</body>
</html>
In this example at first we have bonded “add” and “remove”
event and then we have unbind “add” event and after that we are adding few
model object to Collection. We are getting blank skin in output window; means
‘add’ is not firing.
Unbind all bonded method in collection
If we do not pass any event name associated with unbind()
function then it will unbind all events associated with current Collection. In
this example both ‘add’ and ‘remove’ event will unbind from “person”
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 = new Backbone.Collection;
person.bind("add", function (person) {
console.log("Name Added:-" + person.get("name"));
});
person.bind('remove', function (person) {
console.log("Name:- " + person.get('name')+ ' Deleted from collection');
});
//unbind all binded method in collection
person.unbind();
person.add([
{ name: "Sourav" },
{ name: "Manish" }
]);
person.remove(person.at(0).cid);
</script>
</form>
</body>
</html>
Here is sample output of this example.
Conclusion:-
In this article we have learned the concept of bind() and
unbind() method of Backbone Collection. This is one good data monitoring
mechanism in Backbone.js. Hope you like it.