4

ノックアウト 3.2 の新しいコンポーネント機能に取り組んでおり、requireJS を使用してコンポーネントをロードしようとしています。しかし、私は奇妙な問題を抱えています。基本的に、レジスタ関数でビュー モデルをハードコーディングすると、すべて正常に動作します。requireJS を使用してまったく同じビュー モデルを読み込もうとすると、正しく動作しません。

コンポーネントをロードするための html のサンプルを次に示します。

<div data-bind="component: { name: 'test'}"></div>

このコンポーネントがロードするテンプレートの html は次のとおりです。

<a href="#" data-bind="click: addNew">add</a>
<span data-bind="visible: Adding">test</span>

以下に示すように登録関数を作成すると、すべてが期待どおりに機能します (つまり、これが読み込まれると、ユーザーが「追加」リンクをクリックするまで「テスト」テキストは表示されません)。

ko.components.register('test',
{
    template: { require: 'text!path/theTemplateFromAbove.html' },
    viewModel:
        function() {
            var self = this;
            self.Adding = ko.observable(false);

             self.addNew = function() {
                 self.Adding(true);
             }
        }
 });

しかし、requireJS を使用してビュー モデルをロードするようにこれを変更しようとすると、機能しません。「テスト」テキストは、ユーザーが「追加」リンクをクリックしなくてもすぐに表示されます。ビューモデルのオブザーバブルはどういうわけか台無しになっています。

スクリプト ファイルの内容は次のとおりです (ビュー モデルは同じであることに注意してください)。

define(["knockout"], function (ko) {

    function viewModel() {  
        var self = this;
        self.Adding = ko.observable(false);

        self.addNew = function () {
            self.Adding(true);
        }
    };

    return viewModel;
});

レジスタ関数は次のようになります。

ko.components.register('test',
{
    template: { require: 'text!path/theTemplateFromAbove.html' },
    viewModel: { require: 'path/fileForMyTemplate' }
});

問題のデバッグ中に、knockout-3.2.0 の resolveViewModel 関数にチェックを追加しました。new viewModelConfig(params) を呼び出した後、「追加」がオブジェクトのオブザーバブルかどうかを確認します。ビュー モデルがレジスタ関数でハードコードされている場合、true が返されます。requireJS を使用してビュー モデルをロードすると、false が返されます。

ここで私が間違っていることについてのアイデアはありますか?

4

1 に答える 1

3

[混乱を避けるため、回答としてコメントからコピー]

あなたのko.components.register行はrequirejsモジュール内にラップされていますか?

knockout.jsファイルの前にjavascriptファイルをロードしてから、require.jsグローバルko変数にアクセスして、によってロードされたオブジェクトko.components.registerとは異なるオブジェクトを実行していると思われます。korequire.js

于 2014-11-18T03:28:05.430 に答える