淘汰赛 - 如何在加载部分视图后在主页 ViewModel 上设置子 ViewModel 属性

Question

我正在尝试在我的主页上动态加载 div 的内容，并从控制器返回部分视图。该 div 的内容可能会根据用户在主视图上单击的按钮而改变。部分视图有自己的淘汰视图模型，我想将其绑定到 div（或部分​​视图中的子 div）。

这是我尝试过的......

我的主页上有一个主要的淘汰视图模型...

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);
}

然后我的视图有两个 div，一个绑定到 someValue，另一个绑定到 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有自己的ViewModel，我已经在自己的js文件中声明了，在partial view里面声明了......

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 属性。

另外，我应该怎么做才能确保每次重新加载子内容时正确清除内存使用情况？

任何人都可以提出实现这一目标的最佳方法吗？

Answer 1

您真的需要在这里有一个子模型，还是可以使用两个模型并将它们绑定到页面的不同部分？如果是这样，您可以使用此答案来帮助您做到这一点：

Render partial view using knockout.js

如果您的模型需要相互通信，您可以为此实现发布/订阅模式：

Variable Dependency with knockoutJS

Answer 2

1. 我建议不要像这样（通过引用）紧密耦合您的视图模型，并建议您建立一个通信渠道，而不是使用某种事件聚合器（例如knockout-postbox）
2. 应在加载子视图的 DOM 后立即创建子 VM。
3. ko.cleanNode() 是你的朋友