コントローラから返された部分ビューを使用して、メイン ページに div のコンテンツを動的にロードしようとしています。その div の内容は、ユーザーがメイン ビューでどのボタンをクリックするかによって変わる場合があります。部分ビューには独自のノックアウト ビューモデルがあり、これを div (または部分ビュー内のサブ div) にバインドします。
これは私が試したことです...
メインページにメインノックアウトViewModelがあります...
window.mainpage.viewmodel = (function (ko, datacontext) {
var self = this;
self.someValue = ko.observable("test value");
self.childViewModel = ko.observable();
return {
someValue: someValue,
childViewModel: childViewModel
};
})(ko, window.mainpage.datacontext);
$(document).ready(function () {
var viewModel = window.mainpage.viewmodel;
ko.applyBindings(viewModel);
}
次に、ビューには 2 つの div があり、1 つは someValue にバインドされ、もう 1 つは childViewModel にバインドされます。
<div data-bind="text: someValue"></div>
<div id="subContent" data-bind="with: childViewModel">
</div>
フォームのボタンをクリックしたときに、「subContent」div のコンテンツを Partial View コントローラ アクションの結果に設定したい...
$('#subContent').load('/Test/GetPage', data, function (response, status, xhr) {
//Do something when the partial view is loaded in #subContent
});
私の PartialView には、部分ビュー内で宣言されている独自の js ファイルで宣言した独自の ViewModel があります。
window.child.subviewmodel = (function (ko, datacontext) {
var self = this;
self.someChildValue = ko.observable("test child value");
return {
someChildValue: someChildValue
};
})(ko, window.child.datacontext);
私の問題は、子 ViewModel を作成する場所と、それをメイン ViewModel の childViewModel プロパティに割り当てる方法です。
また、サブコンテンツをリロードするたびにメモリ使用量が適切にクリアされるようにするにはどうすればよいですか?
これを達成するための最良の方法を誰かが提案できますか?