0

我正在尝试在我的主页上动态加载 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 的内容设置为 Partial View 控制器操作的结果......

$('#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 属性。

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

谁能建议实现这一目标的最佳方法？

4

2 回答 2

1
  1. 我建议不要像这样（通过引用）紧密耦合您的视图模型，并建议您建立一个通信渠道，而不是使用某种事件聚合器（例如，淘汰邮箱）
  2. 您应该在加载子视图的 DOM 后立即创建子 VM。
  3. ko.cleanNode() 是你的朋友
于 2013-02-19T14:53:44.307 回答
0

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

使用 knockout.js 渲染局部视图

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

带有knockoutJS的变量依赖

于 2013-02-19T14:50:38.353 回答