导入模块并在视图中使用

Question

在一个带有 Visual Studio 2015 的 ASP.NET 5 项目中，我们使用带有 Knockout 的 Typescript 类来生成我们的 Javascript 文件。我们使用 AMD 和 ES5。 假设我们有这个头等舱：

ActionViewModel.ts

export class ActionViewModel {
     public Id: KnockoutObservable<number>;
     ...
 }

还有另一个在另一个 Typescript 文件中实现 ActionViewModel 的类。

action.ts

 import { ActionViewModel } from 'ActionViewModel';

 class ActionVM extends ActionViewModel {
     ...
 }

 class ActionViewModelManager {
     private actionViewModel: ActionVM;
     ...
 }

ActionViewModelManager 用于管理 ViewModel。由于 import 关键字，我们加载了第一个 ViewModel。

问题

生成的 Javascript 文件使用 define() 方法加载 ActionViewModel.ts 文件。

 define(["require", "exports", 'ActionViewModel'], function (require, exports, ActionViewModel) {
     var ActionVM = (function (_super) {
     }

     var ActionViewModelManager = (function () {
         function ActionViewModelManager(withValidationRules) {
            this.actionViewModel = new ActionVM();
            ko.applyBindings(this.actionViewModel);
         }
         ...
     } 
});

但是如果我想在视图中使用我的 ActionViewModelManager (Index.cshtml)

<script>
        $(function () {
            var actionViewModelManager = new ActionViewModelManager();
        });
</script>

我不能，因为它说 ActionViewModelManager 不可用：它在 define 方法的回调方法范围内。所以我的问题是：我们如何使用在导入另一个类的文件中声明的类？

编辑：所有 JS 生成

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
define(["require", "exports", 'ActionViewModel'], function (require, exports, ActionViewModel) {
    var ActionVM = (function (_super) {
        __extends(ActionVM, _super);
        function ActionVM() {
            var _this = this;
            _super.call(this);

           this.clientSelected = function (args, handler) {
            ...
           };
           this.offreSelected = function (args, handler) {
            ...
           };
           this.submitAction = function (formElement) {
            ...
           };
        }

        return ActionVM;
    })(ActionViewModel);

    var ActionViewModelManager = (function () {
        function ActionViewModelManager(withValidationRules) {
            this.actionViewModel = new ActionVM();
            ko.applyBindings(this.actionViewModel);
        }

        ActionViewModelManager.prototype.SetId = function (valeur) { this.actionViewModel.Id(valeur); };
        ActionViewModelManager.prototype.SetDescription = function (valeur) { this.actionViewModel.Description(valeur); };

        return ActionViewModelManager;
    })();
});

我减少了文件的内容以提高可读性。

Answer 1

对于

<script>
        $(function () {
            var actionViewModelManager = new ActionViewModelManager();
        });
</script>

由于您使用的是 amd（我假设 requirejs），您可以这样做：

<script>
        $(function () {
            require(['/path/to/actionvmfile'],function(res){
                var actionViewModelManager = new res.ActionViewModelManager();
            }
        });
</script>

注意：当然你应该导出这个类才能工作，即export class ActionViewModelManager