-1

我已经使用打字稿将我的视图模型分离到类中。

现在在我的引导程序中，我正在像这样导入它们：

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

有没有办法将它们收集到一个命名空间？我正在使用 requirejs，当编译为 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() {

        }
    }
4

2 回答 2

0

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

您当前正在为每个视图模型/类创建一个新模块。

更新 不起作用，请参阅更新 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

于 2013-04-08T00:52:34.373 回答
0

我所做的是关闭 typescript 中的 AMD 支持，而是利用 WebEssentials JS 包为 requireJS 创建单个导出。为此，我有一个“_prebundle.fragment.js”和一个“_postbundle.fragment.js”以及介于两者之间的所有 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 的情况下使用，这对于我想要公开它时非常有用。此外，我可以捆绑多种不同风格的代码以在其他页面上使用。不确定是否有更好的方法来做到这一点，但这对我有用......

于 2014-09-12T23:04:30.397 回答