为一页使用两个 Knockout 视图模型答案

【问题标题】：Using two Knockout view models for one page为一页使用两个 Knockout 视图模型
【发布时间】：2013-03-15 07:48:26
【问题描述】：

我正在淘汰赛中设置两个视图模型。

$.getJSON("/api/administrators", function (data) {        
    var AccessViewModel = {
        administrators: ko.observableArray(data)
    };
    ko.applyBindings(AccessViewModel);

});

$.getJSON("/api/roles", function (data) {
    var RolesViewModel = {
        definedRoles: ko.observableArray(data)
    };
    ko.applyBindings(RolesViewModel);

});

我能够从视图中的管理员那里获取信息，但无法从 definedRoles 中提取任何内容。当我在 .getJSON 函数中为角色添加警报时，它正在返回数据。创建 RolesViewModel 和我这样称呼它之间似乎有问题：

<ul data-bind="foreach: definedRoles">
    <li data-bind="text: name"></li>
</ul>

有人能指出我正确的方向吗？

【问题讨论】：

标签： asp.net-mvc-4 knockout.js knockout-mvc

【解决方案1】：

ko.applyBindings 每个部分只能调用一次。如果您不传递第二个参数，则该部分是整个页面。如果你有一个特定的部分，比如DIV，你应该把它作为第二个参数传入。

或者，您可以为页面创建一个视图模型，并为两个列表设置一个属性，然后将您的页面绑定到这个单个视图模型。我推荐这种方法。该代码可能如下所示：

var ViewModel = function() {
    this.administrators = ko.observableArray([]);
    this.definedRoles = ko.observableArray([]);
};

var vm = new ViewModel();
ko.applyBindings(vm);

$.getJSON("/api/administrators", function (data) {
    vm.administratos(data);
});

$.getJSON("/api/roles", function (data) {
    vm.definedRoles(data);
});

请记住，由于ko.applyBindings 只需要调用一次，您应该尽早调用。由于几个原因，从 ajax 方法调用它通常是一个坏主意。一、ajax方法不再可以作为更新调用重用；第二，其他页面功能必须等到 ajax 方法返回才能开始工作。

【讨论】：

在这种情况下管理员的行为会去哪里？

【解决方案2】：

Tyrsius 的答案是正确的，但为了将来参考，您可以将两个不同的视图模型绑定到同一页面。您必须像

那样绑定模型

ko.applyBindings(wallView,$("#WallKo")[0]);

并用带有所选 ID 的 div 包装 html，即

<div id = "WallKo">
    <div data-bind="foreach:posts">
         .....
    </div>
</div>

然后，您可以为每个页面拥有任意数量的视图模型。

【讨论】：

抱歉没有注意到。哦，好吧..它促进了你的状态

【解决方案3】：

感谢您提供如何将模型绑定到特定 div 的示例。很有帮助

【讨论】：