Skip to content

Instantly share code, notes, and snippets.

@maxnathaniel
Created February 24, 2016 03:27
Show Gist options
  • Save maxnathaniel/ccd65405239e33dd84bd to your computer and use it in GitHub Desktop.
Save maxnathaniel/ccd65405239e33dd84bd to your computer and use it in GitHub Desktop.
/*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'
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment