Question

我已经使用typescript将我的viewmodels分成了几个类。

现在在我的Bootstraper中，我将这些导入它们：

import dl = module("DataLayer");
import vm1 = module("AppBarViewModel");
import vm2 = module("Nav2ViewModelCommander");
import vm3 = module("IdentityViewModel");

有没有办法将它们收集到一个命名空间？我正在使用requirejs，我的viewmodels在编译为js时看起来像这样。

define(["require", "exports"], function(require, exports) {
    var AppBarViewModel = (function () {
        function AppBarViewModel() {
            this.visible = ko.observable(true);
            this.buttons = ko.observableArray([]);
            this.enableContext = ko.observable(true);
            this.canClose = ko.computed(function () {
                var k = ko.utils.arrayFirst(this.buttons(), function (b) {
                    return b.blockHide && b.blockHide == true;
                });
                return k == null;
            });
        }
        AppBarViewModel.prototype.addButton = function (data) {
            this.buttons.push(data);
            this.visible(data.blockHide && data.blockHide == true);
        };
        AppBarViewModel.prototype.removeButton = function (data) {
            this.buttons.remove(data);
            this.visible(!this.canClose());
        };
        return AppBarViewModel;
    })();
    exports.AppBarViewModel = AppBarViewModel;    
})

这

///<reference path="../knockout.d.ts" />
///<reference path="../require.d.ts" />

declare var ko: any;

    export class AppBarViewModel {

        visible = ko.observable(true);
        buttons = ko.observableArray([]);

        enableContext = ko.observable(true);
        addButton(data) {
            this.buttons.push(data);
            this.visible(data.blockHide && data.blockHide == true);
        }
        removeButton(data) {
            this.buttons.remove(data);
            this.visible(!this.canClose());
        }
        canClose = ko.computed(function () {
            //var buttons = self.buttons();
            //ko.utils.arrayForEach(self.buttons(), function () { return });

            var k = ko.utils.arrayFirst(this.buttons(), function (b) { return b.blockHide && b.blockHide == true });
            return k == null;
        });
        constructor() {

        }
    }

Answer 1

烨。将视图模型放在同一模块中并导入该模块。

您当前正在为每个viewmodel / class创建一个新模块。

更新 无法正常工作请参阅更新2 如果您还想拥有多个模块文件，可以使用typescript编译器将它们合并为一个文件：

tsc AppBarViewModel.ts IdentityViewModel.ts

然后假设文件中包含相同的模块“ViewModels”，您可以使用以下内容导入它们：

import vms = module("ViewModels");

更新2 目前不支持合并外部模块：https://typescript.codeplex.com/discussions/430782

另外，关于单个文件中的外部模块的问题。   外部模块假设您正在使用模块加载器。在这   例如，您希望将模块构建到单独的源文件中   这样它们就可以通过模块加载器加载。建设所有   模块合并为一个.js文件与这些工具的工作方式相反。

我可以看到想要从多个源构建外部模块   文件，虽然我们目前不支持这个并且可能是一个好的   问题跟踪器的功能请求，如果它已经存在

在此处投票赞助此功能：https://typescript.codeplex.com/workitem/759

Answer 2

我所做的是关闭打字稿中的AMD支持，而是利用WebEssentials JS包为requireJS创建单个导出。要做到这一点，我有一个＆＃34; _prebundle.fragment.js＆＃34;和＆＃34; _postbundle.fragment.js＆＃34;以及之间的所有TS编译代码：

    <file>/js/_prebundle.fragment.js</file>

    <file>/js/file1.js</file>
    <file>/js/file2.js</file>
    <file>/js/file3.js</file>

    <file>/js/_postbundle.fragment.js</file>

这会创建以下内容：

///#source 1 1 /js/_prebundle.fragment.js
// START _PREBUNDLE.FRAGMENT >>

(function(factory){
    // Support module loading scenarios
    if (typeof define === 'function' && define.amd){
        // AMD Anonymous Module
        define(['jquery', 'ga', 'knockout', 'sammy'], factory);
    } else {
        // No module loader (plain <script> tag) - put directly in global namespace
        var global = (window || this);

        global.ma = factory(bootstrap, jQuery, qa, ko, sammy);
    }
})(function($, ga, ko, sammy){
    if (!$) throw new Error('JQuery is a pre-requisite and must be loaded for this component.');
    if (!ga) throw new Error('Google Analytics is a pre-requisite and must be loaded for this component.');
    if (!ko) throw new Error('KnockoutJS is a pre-requisite and must be loaded for this component.');
    if (!sammy) throw new Error('SammyJS is a pre-requisite and must be loaded for this component.');

// END _PREBUNDLE.FRAGMENT
///#source 1 1 /js/File1.js
var ma;
(function (ma) {
    var File1 = (function() {
        function File1() {
            // blah
        }

        return File1;
    })();

    ma.File1 = File1;
})(ma || (ma = {}));
//# sourceMappingURL=file1.js.map

///#source 1 1 /js/_postbundle.fragment.js
// START _POSTBUNDLE.FRAGMENT >>

    return ma;
});

// END _POSTBUNDLE.FRAGMENT

这会生成一个require元素，并且还支持在没有RequireJS的情况下使用，这对于我想要公开它是很好的。此外，我可以将我的代码的多种不同风格捆绑在一起，以便在其他页面上使用。不确定是否有更好的方法来做到这一点，但这对我有用......

有没有更好的方法然后在打字输出视图模型的typescript中定义许多类

2 个答案: