Spojrzałem na szablon Hot Towel i próbując go uruchomić w TypeScript, natknąłem się na problem konwersji modelu widoku powłoki. Próbuję przetłumaczyć to na TS i dla mnie bardziej sensowne jest to, że powinno być klasą, a nie po prostu eksportowanie funkcji, jak pokazanotutaj. spojrzałem nato podejście ale zwracając uwagę na komentarzetutaj, postanowił nie podążać za tym.

Po odrobinie kopania znalazłemten wątek, co sugerowało, że powinno być tak proste, jak nadpisywanierouter.getActivatableInstance, ale nie mogę wydostać się na tyle daleko, aby funkcja ta mogła zostać wywołana.

Oto mojamain.ts (również zapakowane w klasie):

/// <reference path="dts/toastr.d.ts" />
/// <reference path="dts/durandal.d.ts" />
/// <reference path="dts/require.d.ts" />

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(() => {
            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) => {
                _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();

(Plac zabaw pokazujący tutaj JS:http://bit.ly/WyNbhn)

... a oto mójshell.ts:

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');
    }
}

... które kompiluje do:

define(["require", "exports", 'durandal/system', 'durandal/plugins/router', 'services/logger'], function(require, exports, ___system__, ___router__, ___logger__) {
    /// <reference path="../dts/_references.ts" />
    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;    
})

W powyższej klasie otrzymuję błąd wiązania, ponieważrouter jest niezdefiniowane. Jeśli dodamexport var router = _router wtedy ten błąd zniknie, ale metoda aktywacji w mojej klasie powłoki nigdy nie zostanie wywołana.

Wszystkie powyższe funkcje działają dobrze dla kolejnych viewmodeli, ale po prostu spadają na powłokę.

Co robię źle i jak mogę uzyskać klasę TS działającą jako mój model widoku Durandala powłoki?