Javascript 如何在Durandal中为shell viewmodel使用类？

我正在查看热毛巾模板，并试图使其在TypeScript中工作，我在转换shell viewmodel时遇到了一个问题。我正在尝试将其转换为TS，它应该是一个类，而不是像图中所示的那样简单地导出函数，这对我来说更有意义。我看了一眼，但注意到了评论，决定不看了

经过一番挖掘之后，我发现，这表明它应该像覆盖

router.getActivatableInstance

一样简单，但我似乎没有足够的方法调用该函数

这是我的

main.ts

（也包含在一个类中）：

。。。其汇编目的是：

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

define（[“require”、“exports”、“durandal/system”、“durandal/plugins/router”、“services/logger]”），函数（require、exports、system、router、logger）{
/// 
var(系统)=(系统)；
var\u路由器=\uuuuuuuuuuuuuuuuuuu路由器；
变量(记录器)=(记录器)；
var shell=（函数（）{
函数shell（）{
this.router=\u路由器；
}
shell.prototype.activate=函数（）{
_logger.log（“激活”，null，“shell”，false）；
返回这个.boot（）；
};
shell.prototype.boot=函数（）{
_logger.log（“boot”，null，“shell”，false）；
这个.router.mapNav（'home'）；
this.router.mapNav（'details'）；
_logger.log（'SCHIOPS SPA Loaded！'，null，_system.getModuleId（this），true）；
返回此.router.activate（'home'）；
};
返回壳；
})();
exports.shell=shell；
})

对于上面的类，我得到一个绑定错误，因为

router

未定义。如果我添加

export-var-router=\u-router

，那么这个bug就会消失，但是我的shell类上的activate方法永远不会被调用

所有这些都适用于后续的viewmodels，但只适用于shell

---

我做错了什么，如何让TS类作为我的shell Durandal viewmodel工作？

问题是您的路由器没有解决您的

shell.TS

模块

所有其他视图模型都通过

router.getActivatableInstance

方法进行实例化，并将

\uuuu moduleId\uuu

附加到它们上。除了您的

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

覆盖您的操作基本相同。。由于您的shell没有通过

router.js

模块，因此必须手动执行此操作。

另一个选项是将类导出为Dural的模块。 注意：此方法也适用于viewmodels

基于nuget的“Durandal初学者工具包”的工作示例： 原始“js”代码：

---

为什么您更喜欢导出类而不是函数？在typescript中，我将类“视为获得继承的一种方式。是否需要将shell和主文件作为类'？通过使它们成为类，您能实现什么好处？正是为了继承。我倾向于为许多不同的客户端构建类似的应用程序（或者有时为一个客户端构建几个相关的应用程序）。这些应用程序的外壳可能有一些共同的特性——我想把它们放到一个基类中，并根据需要重写/扩展。它不像类那样重要（在一个简单的测试应用程序中，我已经有了一个基本的vm类来做普通的工作），但是拥有它会很好。gotchya，我很快会研究它，我最近很忙，但是如果没有其他人回答的话，我明天会尝试研究它。Evan-非常感谢，埃文-谢谢你，祝贺Durandal：真是令人印象深刻的工作。罗伯·艾森伯格写了《Durandal，我只是一个试图帮助他人的早期使用者：），然后祝贺采用了这么好的框架（我向罗伯道歉……）

import _shell = module('shell');

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

    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;

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