1

既にバインドされている親ビュー内のパーシャルビューにバインディングを適用する方法は? または、上記の必要性を克服する方法についての回避策を見つけてください...

私はasp.netを使用しており、ノックアウトでスタッフをやっているメインビューがありViewModelAます。ページには多くの div (タブ) があり、ユーザーはそれらのタブを介して移動でき、ViewModel は常に 1 つしかありません ( ViewModelA)。ViewModelA プロパティは、、、および 内 に設定div1されます。単純な html 構造は次のようになります。div2div3div4

<div id="mycontainer">
    <div id="tab1">..<populate viewmodela properties>..</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
     etc.
</div>


 ko.applyBindings(ViewModelA);

正常に動作しますが、要件が変更されました。部分ビューをこれらの div/tab の 1 つ (内#tab2) に挿入する必要があります。この部分ビューは、次のコマンドを使用して独自のノックアウト モデルを読み込みます。

 ko.applyBindings(partialViewModel, document.getElementById("partial_view_container"));

この場合、バインディングは 2 回行われます (最初にViewModelAバインディングを呼び出すときと、独自のバインディング スタッフを含む partialview を挿入するときに 2 回目)。これにより、「バインディングを同じ要素に複数回適用することはできません」というエラーが発生します。

どうすればこれを修正できますか? applyBindingsバインディングを実行する必要があるコンテナーである 2 番目のパラメーターがあることはわかっていますが、私の場合、さまざまな div (タブ) が取り込まれているためViewModelA、のコンテナーは 1 つもありません。ViewModelA

4

1 に答える 1

0

私は以前に同じ問題を抱えていました..

モデルを 4 つのモデルに分割するように構成する必要があると思います ( に従ってfour tabs)。しかし、あなたのモデルは実際には 1 つなので、それらを 1 つのモデルとして持つ必要があります (ここでトリッキーな部分が来ます)。

現在検討しているのは、1 ページに複数のビュー モデルをノックアウトすることです??

私のアプリでは、Master/Big/Parent/ContainerViewModel を宣言しましたが、それが使用されるのは、ページにある各ビュー モデルのプロパティを持つことだけです (4 つのモデルを思い出してください)。

したがって、ページの各部分/タブには独自の ViewModel (同じである可能性がありますが、データ/値が異なる可能性があります) があり、MasterViewModelこれらの ViewModel を 1 つ (4 * 1) に保持しています。

HTML の部分では、html の処理を​​簡単にするために、with bindingを利用することを強くお勧めします。

SOでジョンパパの答えを確認してください


JS ファイルの例を更新します

function AppMasterViewModel() {
    var self = this;
    self.ViewModelTabOne = new ViewModelTabOne();
    self.ViewModelTabTwo = new ViewModelTabTwo();
    self.ViewModelTabThree = new ViewModelTabThree();
}

HTMLの場合

<div id="mycontainer">
    <!-- #mycontainer related to AppMasterViewModel-->
    <div id="tab1" data-bind="with: ViewModelTabOne">
        <!-- #tab1 related to ViewModelTabOne-->
    </div>
    <div id="tab2" data-bind="with: ViewModelTabTwo">
        <!-- #tab1 related to ViewModelTabTwo-->
    </div>
    <div id="tab3" data-bind="with: ViewModelTabThree">
        <!-- #tab1 related to ViewModelTabThree-->
    </div>
</div>
于 2013-11-13T12:48:45.507 に答える