アプリケーションが非常に大きくなり、単一のViewModelで各ビューを処理するには大きすぎると思っています。
したがって、複数のViewModelを作成し、それらすべてを単一のViewにロードするのがどれほど難しいか疑問に思っています。XのViewModelデータをYのViewModelデータに渡すこともできるようにする必要があるので、個々のViewModelが相互に通信できるようにするか、少なくとも相互に認識できる必要があることに注意してください。
たとえば、私は<select>ドロップダウンを持っています、その選択ドロップダウンには選択された状態があり<select>、別のViewModel ....で別のAjax呼び出しにで選択されたアイテムのIDを渡すことができます。
単一のビューで多数のViewModelを処理する上での重要な点は高く評価されています:)
回答:
すべてを同じページに配置する必要がある場合、これを行う簡単な方法の1つは、他のビューモデルの配列（またはプロパティリスト）を含むマスタービューモデルを用意することです。
masterVM = {
vmA : new VmA(),
vmB : new VmB(),
vmC : new VmC(),
}次に、masterVM必要に応じて、ページ自体に他のプロパティを設定できます。この状況では、を介してリレーしmasterVMたり、バインディングで$parent/ $rootを使用したり、その他のカスタムオプションを使用したりできるため、ビューモデル間の通信は難しくありません。
with:ので、自分自身を繰り返すことはありません
Knockoutは複数のモデルバインディングをサポートするようになりました。のko.applyBindings()メソッドは、オプションのパラメーター（バインディングがアクティブ化される要素とその子孫）を取ります。
例えば：
ko.applyBindings(myViewModel, document.getElementById('someElementId'))これにより、ID someElementIdを持つ要素とその子孫へのアクティブ化が制限されます。
詳細については、ドキュメントを参照してください。
[0]ようなので、（代わりにjQueryオブジェクトの）実際のDOM要素を指定するために：ko.applyBindings(myViewModel, $('#someElementId')[0])
これは、単一のビューに多数のViewModelを含む非常に大きなプロジェクトを完了した後の私の答えです。
HTMLビュー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="container1">
<ul>
<li >Container1 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<div id="container2">
<ul>
<li >Container2 item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/DataFunction.js"></script>
<script src="js/Container1ViewModel.js"></script>
<script src="js/Container2ViewModel.js"></script>
</body>
</html>このビューでは、id = container1とid = container2の2つのビューモデルを2つの別個のJavaScriptファイルで作成しています。
Container1ViewModel.js
function Container1ViewModel()
{
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("ABC");
self.myItems.push("CDE");
} Container2ViewModel.js
function Container2ViewModel() {
var self = this;
self.myItems = ko.observableArray();
self.myItems.push("XYZ");
self.myItems.push("PQR");
}次に、これら2つのビューモデルがDataFunction.jsの個別のビューモデルとして登録された後
var container1VM;
var container2VM;
$(document).ready(function() {
if ($.isEmptyObject(container1VM)) {
container1VM = new Container1ViewModel();
ko.applyBindings(container1VM, document.getElementById("container1"));
}
if ($.isEmptyObject(container2VM)) {
container2VM = new Container2ViewModel();
ko.applyBindings(container2VM, document.getElementById("container2"));
}
});このように、個別のdivに任意の数のビューモデルを追加できます。ただし、登録されたdiv内のdivに対して個別のビューモデルを作成しないでください。
Knockout JSのMultiModelsプラグインを確認してください-https ://github.com/sergun/Knockout-MultiModels
そのためにコンポーネントを使用しています。（http://knockoutjs.com/documentation/component-overview.html）
たとえば、開発中のコンポーネントライブラリがあります。 https //github.com/EDMdesigner/knobjs
コードを詳しく見ると、たとえば、ノブボタンコンポーネントをいくつかの場所で再利用していることがわかります。
masterVM。