my first backbone mess

gistfile1.js

/**
 * @author Waruna Oshan Wisumperuma
 * @contact warunaoshan@gmail.com
 * Friday, October 03 2014 16:32:36
 *
 */

"use strict";

var PaginCollection, ReportModel, paginTotal = 0;

$(function() {
	window.App = {
		model : {},
		collection : {},
		view : {}
	};
	///////////////////////////////////////model
	window.App.model.TeamModel = Backbone.Model.extend({
		url : function() {
			return URL + 'itemSaleReport/getRepsofTeam?idzone=' + this.id;
		},
		idAttribute : "idzone"
	});
	window.App.model.ReportModel = Backbone.Model.extend();
	window.App.model.PaginModel = Backbone.Model.extend({
		idAttribute : "idoutlet"
	});
	/////////////////////////////////////collection
	window.App.collection.TeamCollection = Backbone.Collection.extend({
		model : window.App.model.TeamModel,
		url : URL + 'itemSaleReport/getTeams'
	});
	window.App.collection.PaginCollection = Backbone.Collection.extend({
		model : window.App.model.PaginModel,
		url : function() {
			var url = URL + 'itemSaleReport/getOutletSaleData?from=' + this.searchArg.from + '&to=' + this.searchArg.to + '&lf=' + this.length;
			if (!_.isUndefined(this.searchArg.repId)) {
				url += '&repId=' + this.searchArg.repId;
			} else if (!_.isUndefined(this.searchArg.teamId)) {
				url += '&teamId=' + this.searchArg.teamId;
			}
			return url;
		}
	});
	/////////////////////////////////////view
	window.App.view.TeamView = Backbone.View.extend({
		events : {
			"change" : "fetchModel"
		},
		initialize : function() {
			this.listenTo(this.collection, 'reset', this.render);
		},
		render : function() {
			var options = ['<option value="-1">Select</option>'];
			this.collection.each(function(model) {
				options.push("<option value='" + model.id + "'>", model.get('z_name'), '</option>');
			});
			this.$el.html(options.join(''));
		},
		fetchModel : function(e) {
			var teamidzone = $(e.currentTarget).val();
			if (teamidzone == -1) {
				this.collection.trigger('clearMe');
				return;
			};
			var model = this.collection.get(teamidzone);
			if (model.has('List')) {
				this.collection.trigger('drawMe', teamidzone);
			} else {
				var collection = this.collection;
				model.fetch({
					success : function() {
						collection.trigger('drawMe', teamidzone);
					}
				});
			}
		}
	});
	window.App.view.RepView = Backbone.View.extend({
		initialize : function() {
			this.listenTo(this.collection, 'drawMe', this.render);
			this.listenTo(this.collection, 'clearMe', this.clearMe);
		},
		render : function(id) {
			var list = this.collection.get(id).get('List');
			if (_.isEmpty(list)) {
				this.clearMe();
				return;
			};
			var options = ['<option value="-1">Select</option>'];
			_.each(list, function(pack) {
				options.push("<option value='" + pack.idposition + "'>", pack.rep, '</option>');
			});
			this.$el.html(options.join(''));
		},
		clearMe : function() {
			this.$el.empty();
		}
	});
	window.App.view.ReportView = Backbone.View.extend({
		initialize : function() {
			this.listenTo(this.model, 'change', this.render);
		},
		render : function() {
			if (this.model.has('List')) {
				this.$el.html(this.template(this.model.toJSON()));
				var pagev = new window.App.view.PaginView({
					el : $('#pagin')
				});
				pagev.page = ReportModel.get('page');
				pagev.rowcount = paginTotal;
				pagev.render();
				return this;
			}
		}
	});
	window.App.view.PaginView = Backbone.View.extend({
		initialize : function() {
			this.perpage = 15;
			this.func_Name = 'fetch';
		},
		render : function() {
			var $page = this.page, $per_page = this.perpage, $total = this.rowcount, $adjacents = "2";

			$page = ($page == 0 ? 0 : $page);
			var $start = ($page - 1) * $per_page;

			var $prev = $page - 1;
			var $next = $page + 1;
			var $lastpage = Math.ceil($total / $per_page);
			var $lpm1 = $lastpage - 1;

			var $pagination = "";
			if ($lastpage > 1) {
				$pagination += "<ul class='pagination'>";
				$pagination += "<li class='details'>Page " + $page + " of " + $lastpage + "</li>";
				if ($lastpage < 7 + ($adjacents * 2)) {
					for (var $counter = 1; $counter <= $lastpage; $counter++) {
						if ($counter == $page)
							$pagination += "<li><a class='current'>" + $counter + "</a></li>";
						else
							$pagination += "<li><a onclick='" + this.func_Name + "(" + $counter + ")'>" + $counter + "</a></li>";
					}
				} else if ($lastpage > 5 + ($adjacents * 2)) {
					if ($page < 1 + ($adjacents * 2)) {
						for (var $counter = 1; $counter < 4 + ($adjacents * 2); $counter++) {
							if ($counter == $page)
								$pagination += "<li><a class='current'>" + $counter + "</a></li>";
							else
								$pagination += "<li><a onclick='" + this.func_Name + "(" + $counter + ")'>" + $counter + "</a></li>";
						}
						$pagination += "<li class='dot'>...</li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(" + $lpm1 + ");'>" + $lpm1 + "</a></li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(" + $lastpage + ");'>" + $lastpage + "</a></li>";
					} else if ($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) {
						$pagination += "<li><a onclick='" + this.func_Name + "(1);'>1</a></li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(2);'>2</a></li>";
						$pagination += "<li class='dot'>...</li>";
						for (var $counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) {
							if ($counter == $page)
								$pagination += "<li><a class='current'>" + $counter + "</a></li>";
							else
								$pagination += "<li><a onclick='" + this.func_Name + "(" + $counter + ");'>" + $counter + "</a></li>";
						}
						$pagination += "<li class='dot'>..</li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(" + $lpm1 + ");'>" + $lpm1 + "</a></li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(" + $lastpage + ");'>" + $lastpage + "</a></li>";
					} else {
						$pagination += "<li><a onclick='" + this.func_Name + "(1);'>1</a></li>";
						$pagination += "<li><a onclick='" + this.func_Name + "(2);'>2</a></li>";
						$pagination += "<li class='dot'>..</li>";
						for (var $counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++) {
							if ($counter == $page)
								$pagination += "<li><a class='current'>" + $counter + "</a></li>";
							else
								$pagination += "<li><a onclick='" + this.func_Name + "(" + $counter + ");'>" + $counter + "</a></li>";
						}
					}
				}
				if ($page < $counter - 1) {
					$pagination += "<li><a onclick='" + this.func_Name + "(" + $next + ");'>Next</a></li>";
					$pagination += "<li><a onclick='" + this.func_Name + "(" + $lastpage + ");'>Last</a></li>";
				} else {
					$pagination += "<li><a class='current'>Next</a></li>";
					$pagination += "<li><a class='current'>Last</a></li>";
				}
				$pagination += "</ul>\n";
			}
			this.$el.html($pagination);
		}
	});
	///////////////////////////////////////////run
	var teamCollection = new window.App.collection.TeamCollection();
	teamCollection.fetch({
		reset : true
	});
	new window.App.view.TeamView({
		collection : teamCollection,
		el : $('#teamCombo')
	});
	new window.App.view.RepView({
		collection : teamCollection,
		el : $('#repCombo')
	});
	ReportModel = new window.App.model.ReportModel();
	var ReportView = new window.App.view.ReportView({
		model : ReportModel,
		el : $('#report')
	});
	$.get(URL + 'view/reports/outletSaleReport/tpl/report.html', function(page) {
		ReportView.template = _.template(page);
	}, 'text');
	$('#view').click(function() {
		$.getJSON(URL + 'itemSaleReport/getOutletSaleDataLength', {
			from : $('#from').val(),
			to : $('#to').val()
		}, function(data) {
			paginTotal = data.length;
		});
		ReportModel.clear();
		PaginCollection = new window.App.collection.PaginCollection();
		PaginCollection.searchArg = {
			'from' : $('#from').val(),
			'to' : $('#to').val()
		};
		var tid = $('#teamCombo').val(), rid = $('#repCombo').val();
		if (tid > 0) {
			set.teamId = tid;
		};
		if (rid > 0) {
			set.repId = rid;
		};
		fetch(1);
	});
});

function fetch(no) {
	if (PaginCollection.length < (no * 15) - 1) {
		PaginCollection.fetch({
			remove : false,
			success : function() {
				updateModel(no);
			}
		});
	} else {
		updateModel(no);
	}
}

function updateModel(no) {
	var page = no - 1, perPage = 15;
	var collection = PaginCollection;
	collection = _(collection.rest(perPage * page));
	collection = _(collection.first(perPage));
	var set = collection.map(function(model) {
		return model.toJSON();
	});
	ReportModel.set('List', set);
	ReportModel.set('page', no);
}