Demonstrating Backbone.js: Create Students Directory Part 3

RamaSagar Pulidindi
10y
3.4k
0
0

Article

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create a students directory using 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 a previous article we learned how to create the router and model of a Students Directory app. Here we will see how to create the views.

Step 1: Create a folder named views and create a person-views.js file.

Here we made a view for an individual person and we have set the attributes.

app = app || {};
app.views.Person = Backbone.View.extend({
tagName: 'li',
attributes: function () {
return {
class: 'person ' + this.model.get('type')
};
},
events: {
'click .list-header': 'showDetails'
},
template: _.template($('#person-template').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
showDetails: function (e) {
$(e.target).toggleClass('active');
$(e.target).siblings('.details').slideToggle('fast');
}
});
app.views.People = Backbone.View.extend({
el: '#wrapper',
initialize: function (data) {
this.collection = new app.collections.People(data);
this.render();
this.$el.find('#filters').append(this.createFilters());
this.on('change:searchFilter', this.filterBySearch, this);
this.on('change:filterType', this.filterByType, this);
this.collection.on('reset', this.render, this);
},
events: {
'keyup #searchBox': 'searchFilter',
'click a.filter': 'setFilter'
},
render: function () {
var self = this;
$('#listing').empty();
_.each(this.collection.models, function (person) {
self.renderPerson(person);
}, this);
},
renderPerson: function (person) {
var newperson = new app.views.Person({
model: person
});
$('#listing').append(newperson.render().el);
},
getTypes: function () {
return _.uniq(this.collection.pluck('type'));
},
setListLength: function (l) {
$('#count').html(l);
},
createFilters: function () {
var filters = '<a class="filter" href="#all">all</a>';
_.each(this.getTypes(), function (item) {
filters += '<a class="filter" href="#' + item + '">' + item + '</a>';
});
return filters;
},
searchFilter: function (e) {
this.searchFilter = e.target.value;
this.trigger('change:searchFilter');
},
setFilter: function (e) {
e.preventDefault();
this.filterType = e.currentTarget.innerHTML;
this.trigger('change:filterType');
},
filterBySearch: function () {
this.collection.reset(directoryData, { silent: true });
var filterString = this.searchFilter,
filtered = _.filter(this.collection.models, function (item) {
return item.get('lastname').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
},
filterByType: function () {
if (this.filterType === 'all') {
this.collection.reset(directoryData);
this.setListLength(this.collection.length);
appRouter.navigate('filter/all');
} else {
this.collection.reset(directoryData, { silent: true });
var filterType = this.filterType,
filtered = _.filter(this.collection.models, function (item) {
return item.get('type') === filterType;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
appRouter.navigate('filter/' + filterType);
}
}
}); app = app || {};
app.views.Person = Backbone.View.extend({
tagName: 'li',
attributes: function () {
return {
class: 'person ' + this.model.get('type')
};
},
events: {
'click .list-header': 'showDetails'
},
template: _.template($('#person-template').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
showDetails: function (e) {
$(e.target).toggleClass('active');
$(e.target).siblings('.details').slideToggle('fast');
}
});
app.views.People = Backbone.View.extend({
el: '#heading',
initialize: function (data) {
this.collection = new app.collections.People(data);
this.render();
this.$el.find('#filters').append(this.createFilters());
this.on('change:searchFilter', this.filterBySearch, this);
this.on('change:filterType', this.filterByType, this);
this.collection.on('reset', this.render, this);
},
events: {
'keyup #searchBox': 'searchFilter',
'click a.filter': 'setFilter'
},
render: function () {
var self = this;
$('#listing').empty();
_.each(this.collection.models, function (person) {
self.renderPerson(person);
}, this);
},
renderPerson: function (person) {
var newperson = new app.views.Person({
model: person
});
$('#listing').append(newperson.render().el);
},
getTypes: function () {
return _.uniq(this.collection.pluck('type'));
},
setListLength: function (l) {
$('#count').html(l);
},
createFilters: function () {
var filters = '<a class="filter" href="#all">all</a>';
_.each(this.getTypes(), function (item) {
filters += '<a class="filter" href="#' + item + '">' + item + '</a>';
});
return filters;
},
searchFilter: function (e) {
this.searchFilter = e.target.value;
this.trigger('change:searchFilter');
},
setFilter: function (e) {
e.preventDefault();
this.filterType = e.currentTarget.innerHTML;
this.trigger('change:filterType');
},
filterBySearch: function () {
this.collection.reset(directoryData, { silent: true });
var filterString = this.searchFilter,
filtered = _.filter(this.collection.models, function (item) {
return item.get('lastname').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
},
filterByType: function () {
if (this.filterType === 'all') {
this.collection.reset(directoryData);
this.setListLength(this.collection.length);
appRouter.navigate('filter/all');
} else {
this.collection.reset(directoryData, { silent: true });
var filterType = this.filterType,
filtered = _.filter(this.collection.models, function (item) {
return item.get('type') === filterType;
});
this.setListLength(filtered.length);
this.collection.reset(filtered);
appRouter.navigate('filter/' + filterType);
}
}
});

Step 2 Now include the scripts in index.html.

<!DOCTYPE html>
<html>
<head>
<title>Student Directory with Backbone.js</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="heading">
<h1>Students Directory</h1>
<div class="tools">
Search:<br />
<input type="text" id="searchBox" /><br /><br />
Filter:
<div id="filters">
<!--<a class="filter" href="#all">all</a>
<a class="filter" href="#parent">parent</a>
<a class="filter" href="#student">student</a>-->
</div>
<div id="count"></div>
</div>
<ul id="listing"></ul>
</div>
<script type="text/template" id="person-template">
<span class="list-header"><%= firstname %> <%= lastname %> (<%= type %>)</span>
<div class="details">
home phone: <%= homephone %><br/>
email: <a href="mailto:<%= email %>"><%= email %></a>
</div>
</script>
<script src="js/Studentdata.json" type="text/javascript"></script>
<script src="js/libraries/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/libraries/underscore-min.js" type="text/javascript"></script>
<script src="js/libraries/backbone-min.js" type="text/javascript"></script>
<script src="js/routers/router.js" type="text/javascript"></script>
<script src="js/models/person-model.js" type="text/javascript"></script>
<script src="js/views/person-views.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</body>
</html>