Question

我正在尝试在主页上动态加载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);
}

然后我的视图有两个div，一个绑定到someValue，另一个绑定到childViewModel ....

<div data-bind="text: someValue"></div>
<div id="subContent" data-bind="with: childViewModel">
</div>

当我单击表单上的按钮时，我希望它将“subContent”div的内容设置为部分视图控制器操作的结果...

$('#subContent').load('/Test/GetPage', data, function (response, status, xhr) {
                 //Do something when the partial view is loaded in #subContent
            });

我的PartialView有自己的ViewModel，我已在其自己的js文件中声明，该文件在局部视图中声明....

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

我建议不要像这样（通过引用）紧密耦合你的视图模型，并建议你使用某种事件聚合器（例如knockout-postbox）建立一个通信通道。
一旦加载了子视图的DOM，就应该创建子VM。
ko.cleanNode（）是你的朋友

Answer 2

你真的需要在这里拥有一个儿童模特，或者你可以使用两个模型并将它们绑定到页面的不同部分吗？如果是这样，您可以使用此答案来帮助您：

Render partial view using knockout.js

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

Variable Dependency with knockoutJS

Knockout - 如何在加载局部视图后在主页面ViewModel上设置子ViewModel属性

2 个答案: