Demonstrating Backbone.js: Implement Collections Part 5

In this article we will understand how to use collections in Backbone.js.

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use collections in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections. You can get them from the following:

In this article we will see a few more concepts of collections in Backbone.js.
 
Binding and unbinding in collections
 
Here we have bound the “add” method to the “Product” collection.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" 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 Product = new Backbone.Collection;

        Product.bind("add", function (Product) {

            console.log("Name Added:-" + Product.get("name"));

        });

        Product.add([

{ name: "Iphone" },

{ name: "Xperia" }

]);

    </script>

    </form>

</body>

</html>

  
Output

Binding
 
Unbinding
 
We can unbind any specific method from a Collection. The unbind() function takes an event name as a parameter as shown below.
 

<script>

    var Product = new Backbone.Collection;

    Product.bind("add", function (Product) {

        console.log("Name Added:-" + Product.get("name"));

    });

    Product.bind('remove', function (Product) {

        console.log("Name " + Product.get('name') + ' Deleted from collection');

    });

    Product.add([

{ name: "Iphone" },

{ name: "Xperia" }

]);

    Product.remove(Product.at(0).cid);

</script>

Output

Unbinding
 

Summary

In this article, I explained how to use collections in Backbone.js. In future articles we will understand more about Collections with examples.

Previous article: Demonstrating Backbone.js :Implement Collections Part 4