Question

我正在使用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文件中执行此操作？还是我完全以错误的方式接近这个？

Answer 1

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

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

最简单的方法是定义

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

在主html文件中，使用viewmodel中的字段template（模板ID）和data（子视图模型）创建observable。

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

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

1 个答案: