TodoList.Views.js

/*global TodoMVC: true, Backbone */

var TodoMVC = TodoMVC || {};

(function () {
	'use strict';

	var searchChannel = Backbone.Radio.channel('search');

	// Todo List Item View
	// -------------------
	//
	// Display an individual todo item
	TodoMVC.TodoView = Backbone.Marionette.ItemView.extend({

		//tagName: 'li',

		template: '#template-todoItemView',

		className: "main-list",

		ui: {
			edit: '.edit',
			destroy: '.destroy',
			label: '.displayText',
			toggle: '.toggle'
		},

		events: {
			'click @ui.destroy': 'deleteModel',
			'dblclick @ui.label': 'onEditClick',
			'keydown @ui.edit': 'onEditKeypress',
			'focusout @ui.edit': 'onEditFocusout',
			'click @ui.toggle': 'toggle'
		},

		modelEvents: {
			change: 'render'
		},

		deleteModel: function () {
			this.model.destroy();
		},

		onEditClick: function () {
			var inputEl = $('.edit');
			this.$el.addClass('editing');
			this.$el.next().find(inputEl).addClass('no-top-border');
			this.ui.edit.focus();
			this.ui.edit.val(this.ui.edit.val());
		},

		onEditFocusout: function () {
			var inputEl = $('.edit');			
			var todoText = this.ui.edit.val().trim();
			if (todoText) {
				this.model.set('title', todoText).save();
				this.$el.removeClass('editing');
				this.$el.next().find(inputEl).removeClass('no-top-border');
			} else {
				this.destroy();
			}
		},

		onEditKeypress: function (e) {
			var ENTER_KEY = 13;
			var ESC_KEY = 27;

			if (e.which === ENTER_KEY) {
				this.onEditFocusout();
				return;
			}

			if (e.which === ESC_KEY) {
				this.ui.edit.val(this.model.get('title'));
				this.$el.removeClass('editing');
			}
		}
	});

	// Item List View
	// --------------
	//
	// Controls the rendering of the list of items
	TodoMVC.ListView = Backbone.Marionette.CompositeView.extend({

		template: '#template-todoListCompositeView',

		childView: TodoMVC.TodoView,

		childViewContainer: '#todo-list',

		ui: {
			sortByTitle: '.helperTextName',
			sortByDate: '.helperTextDate',
			search: '#search-todo'
		},

		events: {
			'click @ui.sortByTitle': 'sortByTitle',
			'click @ui.sortByDate': 'sortByDate',
			'keyup @ui.search': 'searchFilter'
		},

		initialize: function () {
			this.sortByTitle = false;
			this.sortByDate = false;
			this.searchItem;
			this.listenTo(this, 'change:searchFilter', this.searchTodo);
			this.collection.listenTo(this.collection, 'reset', this.render);
			// this.collection.on('reset', this.render, this);
		},

		onRender: function() {
			console.log('i am rendered!');
		},

		sortByTitle: function() {
			this.searchItem = undefined;
			this.sortByTitle = !this.sortByTitle;
			if(this.sortByTitle === true) {
				this.collection.comparator = function(a) {
					//console.log('Sorting by ascending order!');					
					return a.get('title');					
				}
				this.collection.sort();
				this.render();				
			}
			else if(this.sortByTitle === false) {
				this.collection.comparator = function(a, b) {
					//console.log('Sorting by descending order!');
					if (b.get('title') > a.get('title')) return 1; // after			
				}
				this.collection.sort();
				this.render();				
			}
		},

		sortByDate: function() {
			this.searchItem = undefined;			
			this.sortByDate = !this.sortByDate;			
			if(this.sortByDate === true) {
				this.collection.comparator = function(a) {
					return a.get('created');					
				}
				this.collection.sort();
				this.render();				
			}
			else if(this.sortByDate === false) {
				this.collection.comparator = function(a) {
					return -a.get('created');					
				}
				this.collection.sort();
				this.render();				
			}
		},

		searchFilter: function(e) {
			this.searchFilter = e.target.value.trim();
			this.trigger('change:searchFilter');
		},

		searchTodo: function() {
			// resets any filters that are applied
			this.collection.reset(this.collection.models, {silent: true});
			console.log(this.searchFilter);
			var filterString = this.searchFilter,
				filtered = _.filter(this.collection.models, function(item) {
					return item.get('title').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;
				});
			this.collection.reset(filtered);
		},

		filter: function (child, index, collection) {
			return child;
		},

		collectionEvents: {
			'sort': 'render'
		}
	});
})();