title: How can I use a class for my shell viewmodel in Durandal?
body: <p>I'm having a look at the Hot Towel template, and trying to get it to work in TypeScript, I've encountered a problem converting the shell viewmodel. I'm trying to translate this into TS, and it makes more sense to me that it should be a class, rather than simply exporting functions as shown <a href="https://github.com/evanlarsen/DurandalTypescriptExample/blob/master/DurandalTypescriptExample/App/viewmodels/shell.ts" rel="nofollow noreferrer">here</a>. I looked at <a href="https://github.com/BlueSpire/Durandal/pull/13" rel="nofollow noreferrer">this approach</a> but, paying attention to the comments <a href="https://stackoverflow.com/a/15601153/1014822">here</a>, decided against following it.</p>
  
  <p>After a bit of digging I found <a href="https://github.com/BlueSpire/Durandal/issues/58" rel="nofollow noreferrer">this thread</a>, which suggested it should be as simple as overriding <code>router.getActivatableInstance</code>, but I can't seem to get far enough for that function ever to be called.</p>
  
  <p>Here's my <code>main.ts</code> (also wrapped up in a class):</p>
  
  <pre><code>/// &lt;reference path="dts/toastr.d.ts" /&gt;
  /// &lt;reference path="dts/durandal.d.ts" /&gt;
  /// &lt;reference path="dts/require.d.ts" /&gt;
  
  import _app = module('durandal/app');
  import _system = module('durandal/system');
  import _viewLocator = module('durandal/viewLocator');
  import _router = module('durandal/plugins/router');
  import _logger = module('services/logger');
  
  export class HOPS {
  
      public init(): void {
          _logger.log('init', this, 'HOPS', false);
          _system.debug(true);
          this._startApp();
      }
  
      private _startApp(): void {
          _logger.log('_startApp', this, 'HOPS', false);
  
          _app.start().then(() =&gt; {
              toastr.options.positionClass = 'toast-bottom-right';
              toastr.options.backgroundpositionClass = 'toast-bottom-right';
  
              var defImpl = _router.getActivatableInstance; //default Implementation
  
              _router.getActivatableInstance = function (routeInfo: _router.routeInfo, paramaters: any, module: any) {
                  var functionName = routeInfo.name.substring(0, 1).toUpperCase() + routeInfo.name.substring(1);
                  if (typeof module [functionName] == 'function') {
                      var instance = new module [functionName]();
                      instance.__moduleId__ = module.__moduleId__;
                      return instance;
                  }
                  else return defImpl(routeInfo, paramaters, module );
              }
  
              _router.handleInvalidRoute = (route: _router.routeInfo, paramaters: any) =&gt; {
                  _logger.logError('No Route Found', route, 'main', true);
              }
  
              _router.useConvention();
              _viewLocator.useConvention();
  
              _app.adaptToDevice();
  
              _app.setRoot('viewmodels/shell', 'entrance');
          });
      }
  }
  
  var hops: HOPS = new HOPS();
  hops.init();
  </code></pre>
  
  <p>(Playground showing JS here: <a href="http://bit.ly/WyNbhn" rel="nofollow noreferrer">http://bit.ly/WyNbhn</a>)</p>
  
  <p>... and here's my <code>shell.ts</code>:</p>
  
  <pre><code>import _system = module('durandal/system');
  import _router = module('durandal/plugins/router');
  import _logger = module('services/logger');
  
  export class Shell{
  
      public router = _router;
  
      public activate(): JQueryPromise {
          _logger.log("activate", null, 'shell', false);
          return this.boot();
      }
  
      public boot(): JQueryPromise {
          _logger.log("boot", null, 'shell', false);
          this.router.mapNav('home')
          this.router.mapNav('details');
          _logger.log('SciHops SPA Loaded!', null, _system.getModuleId(this), true);
          return this.router.activate('home');
      }
  }
  </code></pre>
  
  <p>... which compiles to:</p>
  
  <pre><code>define(["require", "exports", 'durandal/system', 'durandal/plugins/router', 'services/logger'], function(require, exports, ___system__, ___router__, ___logger__) {
      /// &lt;reference path="../dts/_references.ts" /&gt;
      var _system = ___system__;
  
      var _router = ___router__;
  
      var _logger = ___logger__;
  
      var shell = (function () {
          function shell() {
  
              this.router = _router;
          }
          shell.prototype.activate = function () {
              _logger.log("activate", null, 'shell', false);
              return this.boot();
          };
          shell.prototype.boot = function () {
              _logger.log("boot", null, 'shell', false);
              this.router.mapNav('home');
              this.router.mapNav('details');
              _logger.log('SciHops SPA Loaded!', null, _system.getModuleId(this), true);
              return this.router.activate('home');
          };
          return shell;
      })();
      exports.shell = shell;    
  })
  </code></pre>
  
  <p>With the class above, I get a binding error because <code>router</code> is undefined. If I add <code>export var router = _router</code> then this bug goes away but the activate method on my shell class is never called.</p>
  
  <p>All of the above works well for subsequent viewmodels, but just falls over on the shell.</p>
  
  <p>What am I doing wrong, and how can I get a TS class working as my shell Durandal viewmodel?</p>