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多視圖模型

回答

相關問題