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

导入模块并在视图中使用它

1 个答案: