gistfile1.js

$(function(){
  
	XF.defineComponent(
		'tasklist',
		XF.Component.extend({
			modelClass : XF.Model.extend({
				loadData: function () {
					this.rawData = $.parseJSON(XF.Cache.get('tasklist'));
					this.trigger('dataLoaded');
				},
				
				afterLoadData: function () {
					this.set({active: []}, {silent: true});
					this.set({completed: []}, {silent: true});
					
					if (!_.isEmpty(this.rawData)) {
						if (!_.isEmpty(this.rawData.active)) {
							this.set({active: this.rawData.active}, {silent: true});
						}
						
						if (!_.isEmpty(this.rawData.completed)) {
							this.set({completed: this.rawData.completed}, {silent: true});
						}
					}
				},
				
				sync: function () {
					XF.Cache.set('tasklist', 
						JSON.stringify({
							active: this.get('active'), 
							completed: this.get('completed')
						})
					);
				}
			}),
			
			viewClass : XF.View.extend({
				
				postRender: function() {
					var component = this.component;
					
					$('.todo-taskfield', component.selector()).on('keyup', function (e) {
						var val = $(this).val();
						if (e.which == 13 && !_.isEmpty(val)) {
							$(this).val('').blur();
							component.addTask(val, 'active');
						}
					});
					
					$('.todo-remove-active-task', component.selector()).on(XF.Device.TAP, function (e) {
						component.removeTask($(this).data('id'), 'active');
						e.stopPropagation();
						e.preventDefault();
					});
					
					$('.todo-remove-completed-task', component.selector()).on(XF.Device.TAP, function (e) {
						component.removeTask($(this).data('id'), 'completed');
						e.stopPropagation();
						e.preventDefault();
					});
					
					$('.todo-active-task', component.selector()).on(XF.Device.TAP, function (e) {
						component.moveTask($(this).data('id'), 'active', 'completed');
					});
					
					$('.todo-completed-task', component.selector()).on(XF.Device.TAP, function (e) {
						component.moveTask($(this).data('id'), 'completed', 'active');
					});
					
					$('.todo-clear').on(XF.Device.TAP, function (e) {
						component.clear('completed');
					});
				}
			}),
			
			clear: function (src) { 
				this.model.unset(src);
				this.model.sync();
				this.refresh();
			},
			
			addTask: function (val, src) { 
				var tasks = {};
				
				tasks[src] = this.model.get(src);
				this.model.unset(src);
								
				tasks[src].push(val);
				this.model.set(src, tasks[src]);
				
				this.model.sync();
			},
			
			removeTask: function (id, src) {
				var tasks = {};
				
				tasks[src] = this.model.get(src);
				this.model.unset(src);

				tasks[src] = _.filter(tasks[src], function (item, i) { if (i !== id) return item; });
				this.model.set(src, tasks[src]);
				
				this.model.sync();
			},
			
			moveTask: function (id, src, dest) {
				var task = this.model.get(src)[id];
				
				this.removeTask(id, src);
				
				this.addTask(task, dest);
			}
		})
	);

});