202

私のアプリケーションは非常に大きくなり、単一のViewModelで各ビューを処理するには大きすぎると思います。

したがって、複数のViewModelを作成し、それらすべてを1つのビューにロードするのはどれほど難しいのだろうかと思います。また、 XViewModelデータをYViewModelデータに渡すことができる必要があることに注意してください。これにより、個々のViewModelが相互に通信できるか、少なくとも相互に認識できる必要があります。

たとえば、<select>ドロップダウンがあり、その選択ドロップダウンには選択された状態があり<select>、別のViewModelで選択されたアイテムのIDを別のAjax呼び出しに渡すことができます。

単一のビューで多数のViewModelを処理する際のポイントはありがたいです:)

4

5 に答える 5

288

Knockoutは複数のモデルバインディングをサポートするようになりました。このko.applyBindings()メソッドは、オプションのパラメーター（バインディングがアクティブ化される要素とその子孫）を取ります。

例えば：

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

これにより、アクティブ化がIDを持つ要素someElementIdとその子孫に制限されます。

詳細については、ドキュメントを参照してください。

于 2012-07-20T02:36:53.973 に答える
150

それらすべてを同じページに配置する必要がある場合、これを行う簡単な方法の1つは、他のビューモデルの配列（またはプロパティリスト）を含むマスタービューモデルを作成することです。

masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

次に、masterVM必要に応じて、ページ自体に他のプロパティを設定できます。この状況では、ビューモデル間の通信は難しくありません。これは、を介して中継したり、バインディングで/を使用したり、その他のカスタムオプションをmasterVM使用したりできるためです。$parent$root

于 2012-02-15T13:59:10.870 に答える
24

これは、単一のビューに多数の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>

このビューでは、2つの別々のjavascriptファイルにid=container1とid=container2の2つのビューモデルを作成しています。

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に対して個別のビューモデルを作成しないようにしてください。

于 2014-07-16T13:29:54.610 に答える
4

KnockoutJSのMultiModelsプラグインを確認します-https ://github.com/sergun/Knockout-MultiModels

于 2012-06-27T16:09:23.737 に答える
0

それを実現するためにコンポーネントを使用します。（http://knockoutjs.com/documentation/component-overview.html）

たとえば、開発中のコンポーネントライブラリは次のとおりです：https ：//github.com/EDMdesigner/knobjs

コードを掘り下げると、たとえば、ノブボタンコンポーネントをいくつかの場所で再利用していることがわかります。

于 2016-06-28T20:15:55.787 に答える