applyBindings main.js多视图模型

我正在开发一个应用程序使用KnockoutJS，现在已经达到了我想添加第二个视图模型的地步。这是我main.js我的第一个视图模型：applyBindings 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()); 
});

我引用main.js在我Teams.cshtml看法是这样的：

<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()); 
});

而且我已经在像Teams.cshtml我Fixtures.cshtml观点加入到main.js参考。

但我得到的错误：

You cannot apply bindings multiple times to the same element

是这样做是为了对每个视图模型（如mainTeam.js，mainFixture.js）单独main.js文件的正确方法，还是有在一个main.js文件中做到这一点的方法？或者我完全用错误的方式来处理这个问题？

来源

2015-03-02 user517406

您可以使用[淘汰赛邮箱] （https://github.com/rniemeyer/knockout-postbox）来处理viewmodels之间的通信，但是我认为第二个@Sharihin是Knockout的意思是只有一个对applyBindings的调用。在你的情况下，你可以通过下面的方法'修复'：var masterVM = {team：new teamViewModel（），fixture：new fixtureViewModel（）};'，将绑定应用到'master'viewmodel，并相应地更新你的HTML。 – Tyblitz 2015-03-02 22:41:51

如果您必须在视图之间切换，则可以使用组件绑定轻松完成此操作。更多信息[这里]（http://knockoutjs.com/documentation/component-binding.html）和一些真实的例子[这里]（https://github.com/crissdev/spa-template-ko）。 – crissdev 2015-03-03 15:09:54

我与Tyblitz的答案一起提出答案，谢谢！ – user517406 2015-03-03 19:15:58

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

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

最简单的方法做，这是你的主HTML文件来定义

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

，并创建观察到，在视图模型领域template（模板ID）和data（子视图模型）。

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

来源

2015-03-02 21:00:30 Sharihin

applyBindings main.js多视图模型

回答

相关问题