0

Ajax を介して部分ビューを取得し、応答 html をページの div に挿入する MVC 4 アプリケーションがあります。

各部分ビューには、ノックアウト ビュー モデルをインスタンス化し、そのビュー モデルを部分ビューの div にバインドするスクリプト セクションがあります。

部分ビューをリクエストするたびに、以前にリクエストされたビューのビュー モデルのインスタンスがメモリに残っていることに気付きました。理想的には、メモリに残しておきたいビュー モデルは、要求されたばかりの部分ビューにバインドされているビュー モデルだけです。

部分ビューを取得するために使用しているメソッドは次のとおりです。

getFoo: function () {
    $.get('Home/Foo', null, function (data) {
        ko.cleanNode($('#contentDiv')[0]);
        $('#contentDiv').html(data);
    });
},
getBar: function () {
    $.get('Home/Bar', null, function (data) {
        ko.cleanNode($('#contentDiv')[0]);
        $('#contentDiv').html(data);
    });
}

部分的なビューは次のとおりです。

フービュー 

<script type="text/javascript">
$(function () {
    var fooViewModel = new FooViewModel();
    ko.applyBindings(fooViewModel, $('#fooDiv')[0]);
});
</script>

<div id="fooDiv">
    <div data-bind="text:name"></div>
</div>

バービュー

<script type="text/javascript">
$(function () {
    var barViewModel = new BarViewModel();
    ko.applyBindings(barViewModel, $('#barDiv')[0]);
});
</script>

<div id="barDiv">
    <div data-bind="text:name"></div>
</div>

ビューモデルは次のとおりです。

フービューモデル

function FooViewModel() {
this.name = ko.observable('FOO HERE');
}
_.extend(FooViewModel.prototype, {
    fooEvent: function () {
        console.log('foo event fired');
    }
});

バービューモデル

function BarViewModel() {
this.name = ko.observable('BAR HERE');
}
_.extend(BarViewModel.prototype, {
    barEvent: function () {
        console.log('bar event fired');
    }
});

各ビュー モデルのインスタンス数を追加ko.cleanNodeする前に、リクエストごとに 1 ずつ増やします。追加するko.cleanNodeと、アプリケーションは各ビュー モデルの 1 つのインスタンスのみにハングアップしますが、理想的には、メモリ内の唯一のビュー モデルは、部分ビュー リクエストで戻されたものになります。

メモリにぶら下がっているように見える以前のビューモデルインスタンスを取り除く方法を知っている人はいますか?

4

0 に答える 0