main.js 中的 applyBindings 用于多个视图模型答案

【问题标题】：applyBindings in main.js for multiple view modelsmain.js 中的 applyBindings 用于多个视图模型
【发布时间】：2015-05-03 08:37:57
【问题描述】：

我正在使用 KnockoutJS 开发一个应用程序，现在已经到了要添加第二个视图模型的地步。这是我的 main.js 和我的第一个视图模型：

    require(['knockout', 'viewModels/teamViewModel',, 'domReady!'], function (ko, teamViewModel) {

    //validation
    ko.validation.rules.pattern.message = 'Invalid.';

    ko.validation.init({
        registerExtenders: true,
        messagesOnModified: true,
        insertMessages: true,
        parseInputAttributes: true,
        messageTemplate: null
    });

    ko.applyBindingsWithValidation(new teamViewModel());
});

我在我的 Teams.cshtml 视图中引用 main.js，如下所示：

<script type="text/javascript" data-main="/Scripts/main.js" src="~/Scripts/require.js"></script>

现在我想添加第二个视图模型，我已将 main.js 更改为：

    require(['knockout', 'viewModels/teamViewModel', 'viewModels/fixtureViewModel', 'domReady!'], function (ko, teamViewModel, fixtureViewModel) {

    //validation
    ko.validation.rules.pattern.message = 'Invalid.';

    ko.validation.init({
        registerExtenders: true,
        messagesOnModified: true,
        insertMessages: true,
        parseInputAttributes: true,
        messageTemplate: null
    });

    ko.applyBindingsWithValidation(new teamViewModel());
    ko.applyBindingsWithValidation(new fixtureViewModel());
});

我在我的 Fixtures.cshtml 视图中添加了对 main.js 的引用，就像在 Teams.cshtml 中一样。

但我得到了错误：

You cannot apply bindings multiple times to the same element

为每个视图模型（例如 mainTeam.js、mainFixture.js）设置单独的 main.js 文件是正确的方法，还是有一种方法可以在一个 main.js 文件中执行此操作？还是我完全以错误的方式处理这个问题？

【问题讨论】：

您可以使用Knockout postbox 来处理视图模型之间的通信，但是我第二个是@Sharihin，因为Knockout 是“意味着”只有一次调用applyBindings。在您的情况下，您可以通过执行以下操作“修复”此问题：var masterVM = { team: new teamViewModel(), fixture: new fixtureViewModel() };，将绑定应用到“主”视图模型，并相应地更新您的 HTML。
如果您必须在视图之间切换，您可以通过组件绑定轻松完成此操作。更多信息here 和一些真实示例here。
我接受了 Tyblitz 的回答并投票赞成，谢谢！

标签： javascript razor knockout.js requirejs knockout-validation

【解决方案1】：

Knockout.js 专为“应用程序的一个全局视图模型”而设计。

您可以创建根 ViewModel，它将处理页面路由和加载/初始化子模型。

最简单的方法是定义

<div data-bind="template: { name: activePage().template, data: activePage().data } ></div>

在您的主 html 文件中，并在 viewmodel 中使用字段 template(模板的 ID) 和 data(child viewmodel) 创建 observable。

或者，如果您只想让两个淘汰赛“实例”同时运行但针对不同的 DIV，您可以使用 ko.applyBindingsToNode 或 ko.applyBindingAccessorsToNode 指定不同的 HTML 元素作为容器

【讨论】：