0

新しいノックアウト バージョン 3.2 (および requirejs) を使用して 2 つのノックアウト コンポーネントを作成しました。

最初のコンポーネントには、コンポーネントの場合、ビューモデルの監視可能な配列に含まれるオブジェクトのテーブルを表示するための html テンプレートが含まれています。 

define(["knockout", "text!./source-table.html", "knockoutpostbox"], function (ko, sourceTemplate) {

    function sourceViewModel() {

        var self = this;
        this.sourceEntries = ko.observableArray();
        this.selectedSourceEntry = ko.observable().publishOn("selectedSourceEntry");

    $.getJSON('./api/SourceFile').success(function (data, status, xhr) {
            console.log(data);
            var loadedSourceEntries= [];
            $.each(data, function (index, item) {
                loadedSourceEntries.push(new sourceEntry(item.ID, item.Order, item.SourceLocation, item.SourceFilename, item.Description, item.Contact, item.PostCommand, item.IsActive, item.Overwrite));
                console.log(item);
            });
            self.sourceEntries(loadedSourceEntries);
        });

        self.selectSourceEntry = function (data) {
            console.log(data);
            self.selectedSourceEntry(data.id);
        }
    };

    function sourceEntry(id, order, sourceLocation, sourceFilename, description, contact, postCommand, isActive, overwrite) {
        var self = this;

        self.id = id;
        ...
    }

    return { viewModel: sourceViewModel, template: sourceTemplate };
});

2 番目のコンポーネントには、最初のコンポーネントから選択した項目の値を編集するためのモーダルを表示するための html テンプレートが含まれています。

define(["knockout", "text!./destination-table.html", "knockoutpostbox"], function (ko, destinationTemplate) {

function destinationViewModel() {
    var self = this;
    this.destinationEntries = ko.observableArray();
    this.selectedDestinationEnty = ko.observable();

    this.sourceEntry = ko.observable()
            .subscribeTo("selectedSourceEntry", function (newValue) {
                $.getJSON('./api/Destinations/' + newValue).success(function (data, status, xhr) {
                    var loadedDestinationEntries = [];
                    $.each(data, function (index, item) {
                        loadedDestinationEntries.push(new destinationEntry(item.ID, item.SourceID, item.DestinationLocation, item.DestinationFilename));
                        console.log(item);
                    });
                    self.destinationEntries(loadedDestinationEntries);
            });
        });
    };

    function destinationEntry(id, sourceId, destinationLocation, destinationFilename) {
        var self = this;

        self.id = id;
        self.sourceID = sourceId;
        self.destinationLocation = destinationLocation;
        self.destinationFilename = destinationFilename;
    }

return { viewModel: destinationViewModel, template: destinationTemplate };
});

ご覧のとおり、最初のコンポーネントから選択した ID を伝達するために pubsub を使用しました。これは、選択したソース項目の詳細を取得するためにサーバーと通信するための ID を必要とするコンポーネントに使用されます。ただし、選択したアイテムを編集する場合、すべてのデータはクライアントで既に認識されているため、追加の ajax リクエストは解決策にならないため、完全な sourceEntry オブジェクトを伝えたいと考えています。

これは、ノックアウトポストボックスの pubsub 実装を使用して可能ですか?

次の質問はおそらく簡単なものです。コンポーネントのモデルは、編集時にのみロードする必要があります。非表示セクションは、パフォーマンスを考慮すると意味がありません。ノックアウトを使用して実行時にコンポーネントを動的に注入する方法はありますか、またはコンポーネントを動的に追加するには jquery が必要ですか。ここでのベストプラクティスは何ですか?

4

0 に答える 0