title: subscribed events in durandaljs are not unsubscribed
body: <p>This is the flow of the application:</p>
  
  <p>The shell.js loads the schoolyeardialog.js which contains the schoolyearbrowser.js which loads the schoolyearwizard.js via create or edit button. </p>
  
  <p>When I repeat these steps multiple times: click create/edit button then I do multiple
  requests in my SchoolyearWizard to this:</p>
  
  <pre><code> $.when(service.editSchoolyear(schoolyearId))
  </code></pre>
  
  <p>The reason is that the subscribed events are not correctly unsubscribed in my opinion.</p>
  
  <p>I have tried different ways of unsubscribing in the SchoolyearDialog.js file.</p>
  
  <p>Either the events did not fire - when I did the subscription.off(); after the app.on(...)
  or It was unsubscribed at the wrong position.</p>
  
  <p>Where should I unsubscribe correctly?</p>
  
  <p>If you guys need a sample repo as visual studio solution I can provide this if it helps or maybe you see clearly and immediately the error?!</p>
  
  <p>I have also thought about unsubscribing from the 2 events create/edit when the SchoolyearDialog module is "unloaded" because then both events could/would be unsubscribed not only the create OR edit subscription as it is now when I either click the add or edit button... how would I do that?</p>
  
  <p><strong>SHELL</strong></p>
  
  <pre><code>define(['plugins/router', 'durandal/app', 'viewmodels/SchoolyearDialog', 'knockout'], function (router, app, schoolyearDialog, ko) {
  
      self.schoolyearIsLoaded = ko.observable(false);
  
      var saveTimeTableSubscription = app.on('savedTimeTable').then(function (options) {
           // after coming the 2nd time here
          if (!self.schoolyearIsLoaded()) {
              router.map([{ route: 'lessonplanner', moduleId: 'viewmodels/lessonplanner', title: 'lesson planner', nav: true },
                           { route: 'documentbrowser', moduleId: 'viewmodels/documentbrowser', title: 'document browser', nav: true }])
                   .buildNavigationModel();
  
              self.schoolyearIsLoaded(true);
          }
  
          router.navigate("lessonplanner", true);
      });
  
  
      return {
          router: router,
          activate: function () {
              router.map([{ route: '', moduleId: 'viewmodels/SchoolyearDialog', nav: true, title: 'Schoolyearbrowser' }
              ]).buildNavigationModel();
              return router.activate('SchoolyearDialog');
  
          }
      };
  });
  </code></pre>
  
  <p><strong>SchoolyearDialog</strong></p>
  
  <pre><code>define(['durandal/app', 'knockout', 'plugins/router', 'viewmodels/SchoolyearWizard'],
      function (app, ko, router, wizard) {
  
          var ctor = function () {
              debugger;
              var self = this;
              self.createSubscribe = ko.observable();
              self.editSubscribe = ko.observable();
  
              self.activeScreen = ko.observable('viewmodels/SchoolyearBrowser'); // set the schoolyear browser as default module
  
              var createWizardSubscription = app.on('createWizard').then(function () {
  
                  self.createSubscribe().off();
                  self.createSubscribe(null);
  
                  self.activeScreen(new wizard('create'));
  
              }, self);
              self.createSubscribe(createWizardSubscription);
  
              var editWizardSubscription = app.on('editWizard').then(function (schoolyearId) {
  
                  self.editSubscribe().off();
                  self.editSubscribe(null);
  
                  self.activeScreen(new wizard('edit', schoolyearId));
  
              }, self);
              self.editSubscribe(editWizardSubscription);
          }
          return ctor;
      });
  </code></pre>
  
  <p><strong>SchoolyearBrowser</strong></p>
  
  <pre><code>define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router'],
      function (app, dialog, ko, dataservice, router) {
          var SchoolyearBrowser = function () {
  
              var self = this;
              self.schoolyears = ko.observableArray();
  
              $.when(dataservice.getSchoolyears())
               .done(function (schoolyearModels) {
                   self.schoolyears(schoolyearModels);
               });
  
              self.create = function () {
                  app.trigger('createWizard');
              }
  
              self.edit = function () {
                  app.trigger('editWizard', 1);
              }
          };
  
          return SchoolyearBrowser;
      });
  </code></pre>
  
  <p><strong>SchoolyearWizard</strong></p>
  
  <pre><code>define(['durandal/activator', 'viewmodels/step1', 'viewmodels/step2', 'knockout', 'durandal/app', 'services/dataservice', 'viewmodels/CreateEditSchoolyearViewModel'],
      function (activator, Step1, Step2, ko, app, service, CreateEditSchoolyearViewModel) {
  
          var ctor = function (viewMode, schoolyearId) {
              debugger;
              // depending on the mode I could setup 2 different step modules for create and edit ? and the Wizard has one property called content
              if (viewMode === 'edit') {
  
                  $.when(service.editSchoolyear(schoolyearId))
                   .done(function (response) {
                       debugger;
                       self.viewModel(new CreateEditSchoolyearViewModel(response));
                   }).fail(function (error) {
                       alert(error);
                   });
              }
              else if (viewMode === 'create') {
  
                  $.when(service.createSchoolyear())
                   .done(function (response) {
                       debugger;
                       self.viewModel(new CreateEditSchoolyearViewModel(response));
                   }).fail(function (error) {
                       alert(error);
                   });
              }
  
              var self = this;
              var steps = [new Step1(viewMode), new Step2(viewMode)];
              var step = ko.observable(0);   // Start with first step
              self.activeStep = activator.create();
              var stepsLength = steps.length;
  
              self.viewModel = ko.observable();
  
              this.hasPrevious = ko.computed(function () {
                  return step() &gt; 0;
              });
  
              self.caption = ko.observable();
              this.activeStep(steps[step()]);
  
              this.hasNext = ko.computed(function () {
                  if ((step() === stepsLength - 1) &amp;&amp; self.activeStep().isValid()) {
                      // save
                      self.caption('save');
                      return true;
                  } else if ((step() &lt; stepsLength - 1) &amp;&amp; self.activeStep().isValid()) {
                      self.caption('next');
                      return true;
                  }
              });
  
              this.isLastStep = function () {
                  return step() === stepsLength - 1;
              }
  
              this.next = function () {
                  if (this.isLastStep()) {
  
                      var vm = this.activeStep(); //.viewModel;
  
                      $.when(service.saveCreateSchoolyear({ schoolyearId: 1 })).done(function () {
  
                          app.trigger('savedTimeTable', { isSuccess: true });
                      }).fail(function (e) {
  
                          alert(e);
                      });
  
                  }
                  else if (step() &lt; stepsLength) {
                      step(step() + 1);
                      self.activeStep(steps[step()]);
                  }
              }
  
              this.previous = function () {
                  if (step() &gt; 0) {
                      step(step() - 1);
                      self.activeStep(steps[step()]);
                  }
              }
          }
          return ctor;
      });
  </code></pre>