2

目前我正在研究Durandal 2.0 项目。最初我使用这个 JavaScript 代码来执行我的shell.js(ViewModel)，它工作得很好。

初始 JavaScript 代码（工作之一）

    define(['plugins/router', 'durandal/app'], function (router, app) {

    return {
        router: router,
        search: function() {
            app.showMessage('Search not yet implemented...');
        },
        activate: function () {
            router.map([
                { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
        
            return router.activate();
        }
    };
    });

现在我正在尝试使用打字稿。所以我写了这段代码（下一个），这不是打字稿代码：

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />

    import _config = require('config');
    import _router = require('plugins/router');
    import _app = require('durandal/app');

    class shell {
    //config = new _config.Config();
    app = _app;
    router = _router;

    activate() {
      this.router.map([
            { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
            { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
             ]).buildNavigationModel();
          return this.router.activate();
        }
    }

typescript 的输出：TypeScript 生成的 JavaScript 代码（不工作）

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />
    define(["require", "exports", 'plugins/router', 'durandal/app'], function(require, exports, ___router__, ___app__) {

    var _router = ___router__;
    var _app = ___app__;

    var shell = (function () {
        function shell() {
            //config = new _config.Config();
            this.app = _app;
            this.router = _router;
        }
        shell.prototype.activate = function () {
            this.router.map([
                { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
            return this.router.activate();
        };
        return shell;
      })();
    });

谁能建议我这是什么问题？？我得到的错误是这样的，

无法解析绑定。

绑定值： attr: { href: router.navigationModel()[0].hash }

消息：未定义路由器；

视图：视图/shell；

ModuleId：视图模型/外壳

4

2 回答 2

2

Durandal 期望从模块返回对象的一个​​实例。Typescript 的 AMD 约定是导出构造函数。在这里讨论这个问题和插件解决方案：https ://github.com/BlueSpire/Durandal/pull/244

我创建了 Durandal v2.0 插件来帮助解决问题：

https://gist.github.com/Jaben/6180861

它将找到视图的导出类，并在可用时使用它。

您还需要在 TypeScript 中将“shell”类标记为导出：

import _config = require('config');
import _router = require('plugins/router');
import _app = require('durandal/app');

export class shell {
    //....
}
于 2013-08-22T15:50:18.527 回答
1

谢谢大家的建议，但我通过在代码末尾创建一个新的类实例解决了这个问题，这工作正常。

     return new shell();

上面的行已在课后添加。

于 2013-08-23T06:19:40.023 回答