Knockoutの別の要素にバインドされたViewModelにはどうすればアクセスできますか？

Question

私は、別のコンポーネントのモデルにアクセスしてフラグを設定する必要があるコンポーネントがある状況があります。

ので、これに似た何か：

<div id='component1'> 
    <div data-bind='visible: showMe()'>Shown</div> 
</div> 

<div id='component2'> 
    <button data-bind='click: setFlag()'>Set the flag</button> 
</div> 

Javascriptを：

(function() { 
    var vm1 = { 
     showMe: ko.observable(false) 
    }; 
    ko.applyBindings(vm1, $("#component1")); 
})(); 

(function() { 
    var vm2 = { 
     setFlag: function() { 
      // How to set showMe to true in vm1     
     } 
    } 
    ko.applyBindings(vm2, $("#component2")); 
})(); 

Answer 1

あなたのコードに基づいて、私は#component1が#component2に依存した部分図のようなものであると仮定します。 #component1の内部には直接埋め込まれていないので、両方を保持する共通のコンテナが必要です。この共通のコンテナは、両方のコンポーネントのホストとして考える必要があります。

通常、論理的に相互に関連する部分を共通のコンテナにラップし、そのコンテナのビューモデルを定義する必要があります。それ以外は何もしませんが、個々の部品やコンポーネントのビューモデル、あなたの質問のように、いつ何が見えるかを定義するような調整論理。

だから私は次のようにそれについて移動します：

function component1ViewModel() { 

}; 

function component2ViewModel() { 

}; 

function mainViewModel() { 
    var self = this;   

    // Doesn't have to be observable if the value is never changed   
    this.component1VM = ko.observable(new component1ViewModel()); 
    this.component2VM = ko.observable(new component2ViewModel()); 

    this.component1Visible = ko.observable(false); 
    this.setComponent1Visible = function(visible) { 
     self.component1Visible(visible); 
    }; 
}; 

次に、あなたのマークアップ：

<div id="main"> 
    <div id="component1" data-bind="with: component1VM, visible: $parent.component1Visible()"> 
    Yay I'm visible! 
    </div> 

    <div id="component2" data-bind="with: component2VM"> 
    <button type="button" data-bind="click: $parent.setComponent1Visible.bind($data, true)"> 
     Show component 1 
    </button> 
    </div> 
</div> 

そして最後に、初期設定：

$(function() { 
    ko.applyBindings(new mainViewModel(), $('#main')[0]); 
}); 

だから、それを合計します2つの相互依存するビューモデルを共通のコンテナにラップすることによって、$parent e lement knockoutはマークアップを提供し、その参照を使用して、ビューモデル階層の上位オブジェクトの関数を呼び出すことができます。

しかし、この方法を使用すると、適切なナビゲーション：$parent.component1.someFunction.bind($data, val1, val2)を追加したい場合はcomponent1に直接電話することができます。実際、共通の親で可視性に関連するものを定義することに限定されず、より好きな方法を使用してより読みやすくすることができます。