Filtering the Collection in Backbone.js

Introduction

This article explains the filtering of the collection in backbone.js. The goal here is to create a collection in which a filer function is provided for filtering the collection. The filter function is SetFilter(function() {}), it is set as the given function as the filter.

Use the following procedure to create the sample:

Create a Web application:

Start Visual Studio 2013.
From the Start window select "New Project".
Select "Installed" -> "Visual C#" -> "Visual Studio 2012"and select "Empty web application".

Select Web application

Click the "OK" button.

Now add an HTML page to the project.

In the Solution Explorer.
Right-click on the project and select "Add" -> "HTML Page".

Add HTML page

Change the Name of the page.

Change Name

Now click on the "Add" button.

Add the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Backbone.js Filter List Example</title>

</head>

<body>

</div>

var myapp = {

model: {},

view: {},

collection: {},

router: {}

}

</script>

<h2 class="box_head grad_colour">Tasks List</h2>

ShowList: <select id="taskSorting"><option value="0">Currently working on</option><option value="1">Completed Task</option></select>

</div>

</div>

</script>

</li>

</script>

Backbone.history.start();

</script>

</body>

</html>

Now add a new folder in the project in which we add the JavaScript file:

In the Solution Explorer.
Right-click on the project and select "Add" -> "New Folder".
Set the folder name as "js".
Now add three Js files Model, router, collection.

Add javascript

Right-click on the folder and select "Add" -> "New Item" -> "JavaScript".

In the "Collection.js" script file add the following code:

myapp.collection.Tasks = Backbone.Collection.extend({

currentStatus: function (status) {

return _(this.filter(function (data) {

return data.get("completed") == status;

}));

search: function (letters) {

if (letters == "") return this;

var pattern = new RegExp(letters, "gi");

return _(this.filter(function (data) {

return pattern.test(data.get("name"));

}));

}

});

myapp.collection.tasks = new myapp.collection.Tasks([tasks1, tasks2, tasks3, tasks4]);

In the Model.js file Add the following Code:

myapp.model.Tasks = Backbone.Model.extend({

default: {

completed: 0,

url: "/js/libs/fixtures/task.json"

});

var tasks1 = new myapp.model.Tasks({

completed: 0,

}

);

var tasks2 = new myapp.model.Tasks({

completed: 1,

}

);

var tasks3 = new myapp.model.Tasks({

completed: 0,

}

);

var tasks4 = new myapp.model.Tasks({

completed: 1,

}

);

In the "router.js" script file add the following code:

myapp.router.Tasks = Backbone.Router.extend({

routes: {

"": "list",

list: function () {

this.listContainerView = new myapp.view.TasksContainer({

collection: myapp.collection.tasks

});

$("#contentContainer").append(this.listContainerView.render().el);

this.listContainerView.sorts()

}

});

myapp.router.tasks = new myapp.router.Tasks;

Now execute the application, it will look like this:

Outputscreen

Select the Task type from the drop down list; it changes depending on the selection:

Filter collection