5

我正在查看 Hot Towel 模板，并试图让它在 TypeScript 中工作，我在转换 shell 视图模型时遇到了问题。我正在尝试将其翻译成 TS，对我来说它应该是一个类更有意义，而不是像这里所示的那样简单地导出函数。我查看了这种方法，但是，注意这里的评论，决定不遵循它。

经过一番挖掘后，我发现了这个线程，这表明它应该像覆盖一样简单router.getActivatableInstance，但我似乎无法获得足够远的距离来调用该函数。

这是我的main.ts（也上课）：

/// <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();

（此处显示 JS 的游乐场：http: //bit.ly/WyNbhn）

...这是我的shell.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');
    }
}

...编译为：

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

使用上面的类，我得到一个绑定错误，因为router它是未定义的。如果我添加export var router = _router，那么这个错误就会消失，但我的 shell 类上的 activate 方法永远不会被调用。

以上所有内容都适用于后续视图模型，但只是落在了外壳上。

我做错了什么，我怎样才能让一个 TS 类作为我的 shell Durandal 视图模型工作？

4

2 回答 2

4

问题是您的路由器没有解析您的shell.ts模块。

所有其他视图模型都通过该router.getActivatableInstance方法并被实例化__moduleId__并附加到它们上。除了你的shell.ts模块。

这是让你的shell.ts模块工作的一种快速而肮脏的方式。

在您的内部，您main.ts可以要求您的shell.ts模块：

import _shell = module('shell');

然后，仍然在您的内部，main.ts您可以实例化您的shell类并为其分配 moduleId。

var shell = new _shell.Shell();
shell.__moduleId__ = _shell.__moduleId__;
_app.setRoot(shell, 'entrance');

不是你见过的最漂亮的东西。但它可以完成工作。这与覆盖您所做的几乎相同getActivatableInstance。由于您的外壳没有通过router.js模块，因此您必须手动完成。

于 2013-04-03T03:35:26.067 回答
4

另一种选择是将类导出为 Duranal 的模块。注意：此方法也适用于视图模型。

基于 nuget 的“Durandal Starter Kit”的工作示例：

    import router = require('plugins/router')
    import app = require('durandal/app')

    class Shell {
        router =  router;
        public search() {
            //It's really easy to show a message box.
            //You can add custom options too. Also, it returns a promise for the user's response.
            app.showMessage('Search not yet implemented...');
        }
        public activate() {
            router.map([
                { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },
            ]).buildNavigationModel();


            return router.activate();
        }
    }

    // Magic happens here:
    export = Shell;

原始的“js”代码：

    define(['plugins/router', 'durandal/app'], function (router, app) {
        return {
            router: router,
            search: function() {
                //It's really easy to show a message box.
                //You can add custom options too. Also, it returns a promise for the user's response.
                app.showMessage('Search not yet implemented...');
            },
            activate: function () {
                router.map([
                    { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                    { route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },
                ]).buildNavigationModel();


                return router.activate();
            }
        };
    });
于 2013-11-27T23:58:20.307 回答