Use Controller

app/js/app.js

@@ -10,56 +10,18 @@ ContactManager.addRegions({
 
 ContactManager.addInitializer(function(data) {
   var contacts = new ContactManager.Collections.Contacts(data.contacts),
-      router = new ContactManager.Router();
-
-  router.on('route:home', function() {
-    router.navigate('contacts', {
-      trigger: true,
-      replace: true
-    });
-  });
-
-  router.on('route:showContacts', function() {
-    var contactsView = new ContactManager.Views.Contacts({
-      collection: contacts
-    });
-
-    ContactManager.mainRegion.show(contactsView);
-  });
-
-  router.on('route:newContact', function() {
-    var newContactForm = new ContactManager.Views.ContactForm({
-      model: new ContactManager.Models.Contact()
-    });
-
-    newContactForm.on('form:submitted', function(attrs) {
-      attrs.id = contacts.isEmpty() ? 1 : (_.max(contacts.pluck('id')) + 1);
-      contacts.add(attrs);
-      router.navigate('contacts', true);
-    });
-
-    ContactManager.mainRegion.show(newContactForm);
-  });
-
-  router.on('route:editContact', function(id) {
-    var contact = contacts.get(id),
-        editContactForm;
-
-    if (contact) {
-      editContactForm = new ContactManager.Views.ContactForm({
-          model: contact
+      router = new ContactManager.Router(),
+      controller = new ContactManager.Controller({
+        contacts: contacts,
+        router: router,
+        mainRegion: this.mainRegion
       });
 
-      editContactForm.on('form:submitted', function(attrs) {
-        contact.set(attrs);
-        router.navigate('contacts', true);
-      });
 
-      ContactManager.mainRegion.show(editContactForm);
-    } else {
-      router.navigate('contacts', true);
-    }
-  });
+  router.on('route:home', controller.home, controller);
+  router.on('route:showContacts', controller.showContacts, controller);
+  router.on('route:newContact', controller.newContact, controller);
+  router.on('route:editContact', controller.editContact, controller);
 });
 
 ContactManager.on('initialize:after', function(options){

app/js/controller.js

@@ -0,0 +1,56 @@
+ContactManager.Controller = Marionette.Controller.extend({
+  initialize: function(options) {
+    this._contacts = options.contacts;
+    this._router = options.router;
+    this._mainRegion = options.mainRegion;
+  },
+
+  home: function() {
+    this._router.navigate('contacts', {
+      trigger: true,
+      replace: true
+    });
+  },
+
+  showContacts: function() {
+    var contactsView = new ContactManager.Views.Contacts({
+      collection: this._contacts
+    });
+
+    ContactManager.mainRegion.show(contactsView);
+  },
+
+  newContact: function() {
+    var newContactForm = new ContactManager.Views.ContactForm({
+      model: new ContactManager.Models.Contact()
+    });
+
+    this.listenTo(newContactForm, 'form:submitted', function(attrs) {
+      attrs.id = this._contacts.isEmpty() ? 1 : (_.max(this._contacts.pluck('id')) + 1);
+      this._contacts.add(attrs);
+      this._router.navigate('contacts', true);
+    });
+
+    ContactManager.mainRegion.show(newContactForm);
+  },
+
+  editContact: function(id) {
+    var contact = this._contacts.get(id),
+        editContactForm;
+
+    if (contact) {
+      editContactForm = new ContactManager.Views.ContactForm({
+          model: contact
+      });
+
+      this.listenTo(editContactForm, 'form:submitted', function(attrs) {
+        contact.set(attrs);
+        this._router.navigate('contacts', true);
+      });
+
+      ContactManager.mainRegion.show(editContactForm);
+    } else {
+      this._router.navigate('contacts', true);
+    }
+  }
+});

index.html

@@ -99,6 +99,7 @@ <h2 class="page-header text-center"><%= isNew ? 'Create' : 'Edit' %> Contact</h2
     <script src="app/js/views/contact.js"></script>
     <script src="app/js/views/contacts.js"></script>
     <script src="app/js/views/contactForm.js"></script>
+    <script src="app/js/controller.js"></script>
     <script src="app/js/router.js"></script>
 
     <script>