Can mark tasks as done and reopen them

index.html

@@ -116,7 +116,10 @@ <h2>Assigned: <span class="assigned"></span></h2>
 
     </div> <!-- /container -->
 <script type="text/template" id="tasktemplate">
-    <a href="#view-<%= id %>"><%= title %></a> <a href="#edit-<%= id %>">Edit</a> <a href="#remove-<%= id %>">Remove</a>
+    <a href="#view/<%= id %>"><%= title %></a> [<a href="#edit-<%= id %>">Edit</a>] [<a href="#remove-<%= id %>">Remove</a>] [<a href="#done">Mark as resolved</a>]
+</script>
+<script type="text/template" id="tasktemplate-done">
+    <%= title %> [<a href="#reopen">Reopen</a>]
 </script>
 <script data-main="js/main" src="js/libs/require.js"></script>
 

js/main.js

@@ -4,7 +4,6 @@ requirejs.config({
         'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min',
         'bootstrap': 'libs/bootstrap.min',
         'backbone-lib': 'libs/backbone-min',
-        //'backbone-lib': 'http://backbonejs.org/backbone',
         'backbone-debug': 'libs/backbone.debug',
         'backbone': 'libs/backbone.localStorage-min',
         'underscore': 'libs/underscore-min',

js/models/tasker.js

@@ -4,6 +4,20 @@ define(['backbone', 'collections/task'], function( Backbone, TaskCollection )
         defaults: {
             'tasks': new TaskCollection(),
             'done': new TaskCollection()
+        },
+        markAsDone: function( id )
+        {
+            var model = this.get( 'tasks' ).get( id );
+
+            this.get( 'tasks' ).remove( id );
+            this.get( 'done' ).add( model );
+        },
+        reopenTask: function( id )
+        {
+            var model = this.get( 'done' ).get( id );
+
+            this.get( 'done' ).remove( id );
+            this.get( 'tasks' ).add( model );
         }
     });
 

js/script.js

@@ -3,7 +3,7 @@ define(['jquery', 'backbone', 'models/tasker', 'views/list', 'views/form', 'view
     var AppRouter = Backbone.Router.extend( {
         routes: {
             'add': 'add',
-            'view-:id': 'view',
+            'view/:id': 'view',
             'edit-:id': 'add',
             '*home': 'home'
         },
@@ -13,13 +13,16 @@ define(['jquery', 'backbone', 'models/tasker', 'views/list', 'views/form', 'view
         {
             this.tasks = new Tasker();
             this.views.listtodo = new ListView( {collection: this.tasks.get( 'tasks' )} );
-            this.views.listdone = new ListView( {collection: this.tasks.get( 'done' ), el: document.getElementById( 'tasklist-done' )} );
+            this.views.listdone = new ListView( {collection: this.tasks.get( 'done' ), el: document.getElementById( 'tasklist-done' ), template: _.template( document.getElementById( 'tasktemplate-done' ).innerHTML ) } );
             this.views.task = new TaskView();
             this.views.form = new FormView( {collection: this.tasks.get( 'tasks' )} );
 
             this.tasks.get( 'tasks' ).on( 'add remove change', this.goToHome, this );
 
             this.tasks.get( 'tasks' ).fetch();
+
+            this.views.listtodo.on( 'task:markAsDone', this.tasks.markAsDone, this.tasks );
+            this.views.listdone.on( 'task:reopen', this.tasks.reopenTask, this.tasks );
         },
         showOnly: function ( section )
         {

js/views/list.js

@@ -2,18 +2,27 @@ define(['jquery', 'underscore', 'backbone', 'views/task_list', 'views/tabs'], fu
 {
     var ListView = Backbone.View.extend( {
         el: document.getElementById( 'tasklist' ),
-        template: _.template( document.getElementById( 'tasktemplate' ).innerHTML ),
+        template: null,
         tabs: new TabsView(),
-        initialize: function ()
+        initialize: function ( options )
         {
+            if ( options.template )
+            {
+                this.template = options.template;
+            }
+
             this.collection.on( 'add', this.addOne, this );
             this.collection.on( 'reset', this.render, this );
         },
         addOne: function ( model )
         {
-            var view = new SingleTaskListView( {model: model} );
+            var view = new SingleTaskListView( {model: model, template: this.template} );
 
             view.render();
+
+            view.on( 'task:markAsDone', this.markAsDone, this );
+            view.on( 'task:reopen', this.reopenTask, this );
+
             this.$el.append( view.el );
         },
         render: function ( collection )
@@ -26,6 +35,14 @@ define(['jquery', 'underscore', 'backbone', 'views/task_list', 'views/tabs'], fu
         showTab: function( tab )
         {
             this.tabs.showTab( tab );
+        },
+        markAsDone: function( model )
+        {
+            this.trigger( 'task:markAsDone', model.get( 'id' ) );
+        },
+        reopenTask: function( model )
+        {
+            this.trigger( 'task:reopen', model.get( 'id' ) );
         }
     } );
 

js/views/task_list.js

@@ -4,10 +4,16 @@ define(['jquery', 'underscore', 'backbone'], function( $, _, Backbone )
         template: _.template( document.getElementById( 'tasktemplate' ).innerHTML ),
         tagName: 'li',
         events: {
-            'click a[href^="#remove"]': 'removeModel'
+            'click a[href^="#remove"]': 'removeModel',
+            'click a[href="#done"]': 'markAsDone',
+            'click a[href="#reopen"]': 'reopenTask'
         },
-        initialize: function()
+        initialize: function( options )
         {
+            if ( options.template )
+            {
+                this.template = options.template;
+            }
             this.model.on( 'destroy remove', this.remove, this );
             this.model.on( 'change', this.render, this );
         },
@@ -27,6 +33,16 @@ define(['jquery', 'underscore', 'backbone'], function( $, _, Backbone )
             options.id = this.model.cid
             this.el.innerHTML = this.template(  options );
             return this;
+        },
+        markAsDone: function( e )
+        {
+            this.trigger( 'task:markAsDone', this.model );
+            e.preventDefault();
+        },
+        reopenTask: function( e )
+        {
+            this.trigger( 'task:reopen', this.model );
+            e.preventDefault();
         }
     });