热毛巾(durandal) +打字

Question

这是我的第一篇文章，祝我好运:)

我想使用热毛巾(杜兰德)+打字，我遵循了这些帖子：- how-can-i-use-a-class-for-my-shell-viewmodel-in-durandal - how-to-use-fancybox-in-combination-with-durandal-en-typescript - incorrect-this-in-select

，还尝试了DurandalTypescriptExample示例。

运行此示例时不会出现以下错误：

“'/‘应用程序中的服务器错误。

找不到该资源。“

一开始我决定只用typescript修改我的视图模型，之后也是shell，但在这两种情况下我都得到了这个错误：

这是我的shell.ts代码(我在this示例中使用了它)：

/// <reference path="../durandal/durandal.d.ts" />

import _router = module('durandal/plugins/router');
import app = module('durandal/app');

export var router = _router;

export function search() {
    app.showMessage('Search not yet implemented...');
}
export function activate() {
    return router.activate('welcome');
}

我得到了这个错误：

- JavaScript runtime error: 'exports' is undefined

有什么想法吗？

如果可能的话，我们会感谢可行的解决方案。

感谢各位，让我们看看会发生什么。

Answer 1

我在DurandalTypescriptExample上也遇到了同样的问题。然而，本项目中的代码演示了如何在viewmodel文件中实现您的typescript代码，前提是您只需确保公开处理durandal请求的变量。

请参见下面的代码示例：

/// <reference path="../../dts/knockout/knockout.d.ts" //>
export class ViewModel {
    title: string =  'Home View';
    MyTitle: KnockoutObservableString; //MyTitle can be referenced in home.html as vm.MyTitle
    public activate() {
         this.MyTitle = ko.observable(this.title + " with my ko title");
         return true;
    }
}

export var vm = new ViewModel();
//The Durandal plugin-interface variables
export var title = vm.title;
export var activate = function () { return vm.activate(); };

因为我找不到现成的项目来演示这一点，所以我不得不自己做。在github上查看我的热毛巾项目：

https://github.com/Svakinn/TypeTowel

Answer 2

如果您在全局范围内导出某些内容，则您处于外部模块领域，并且需要第三方库来管理您的模块。

我建议您使用RequireJS。基本上是以下类型的脚本：

export function f(){
}

生成以下js：

function f() {
}
exports.f = f;

exports是由第三方模块加载器定义的变量。如果您没有这样的模块加载器，那么导出是未定义的。The tutorial of mine进一步解释了这一点。

Answer 3

我发现将这个类导出为requirejs/durandal模块会更容易。通过使用以下export语句：

    export = ClassName;

这允许我们实现接口，甚至扩展视图模型基类(不确定扩展部分)，而无需重复导出xxx……我们想要包含在模块中的每个函数的代码。

试试看。

下面是一个工作示例：

    // Durandal "test" view model definition using typescript
    import dialog = require("plugins/dialog")

    class Test {
        title: string = 'test';

        public activate() {
            dialog.showMessage("the test is working!");
            return true;
        }
    }

    // Instead of using code like:
    // export var instance = new Test();
    // export var activate = function() { return instance.activate(); }
    // .. more Durandal specific overrides...

    // Simply use...
    export = Test;