-1

タイプスクリプトを使用してビューモデルをクラスに分離しました。

今私のBootstraperで、私はそれらをすべて次のようにインポートしています:

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

それらを 1 つの名前空間に集める方法はありませんか? 私は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

私がしたことは、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 要素が 1 つ生成され、RequireJS なしでの使用もサポートされます。これは、公開したい場合に便利です。さらに、他のページで使用するために、複数の異なるフレーバーのコードをまとめることができます。これを行うためのより良い方法があるかどうかはわかりませんが、これは私にとってはうまくいきます...

于 2014-09-12T23:04:30.397 に答える
0

うん。ビューモデルを同じモジュール内に配置し、そのモジュールをインポートします。

現在、ビューモデル/クラスごとに新しいモジュールを作成しています。

更新 が機能しない 更新 2 を参照してくださいモジュール用に複数のファイルが必要な場合は、typescript コンパイラを使用してそれらを 1 つにマージできます。

tsc AppBarViewModel.ts IdentityViewModel.ts

次に、ファイルの内部に同じモジュール「ViewModels」があると仮定すると、次のようにインポートできます。

import vms = module("ViewModels");

更新 2外部モジュールのマージは現在サポートされていません: https://typescript.codeplex.com/discussions/430782

また、単一ファイル内の外部モジュールに関する質問にも。外部モジュールは、モジュール ローダーを使用していることを前提としています。この場合、モジュール ローダーを介してロードできるように、モジュールを個別のソース ファイルにビルドする必要があります。すべてのモジュールを 1 つの .js ファイルに構築することは、これらのツールの動作に反します。

複数のソース ファイルから外部モジュールを構築したいという要望はありましたが、現時点ではこれをサポートしておらず、Issue Tracker にまだ存在しない場合は、適切な機能のリクエストになる可能性があります。

ここでこの機能に投票してください: https://typescript.codeplex.com/workitem/759

于 2013-04-08T00:52:34.373 に答える