子ビューモデルが別の子ビューモデルを変更しています

Question

私は自分の画面のメインビューモデルを持っています。 2つの子ビューモデルで構成されています。

登録セクションを処理します。 1人がログインセクションを処理します。 （認証され、どのようなメニュー項目に表示され、同様に「ようこそ 『のユーザー名ができれば一つは、メニューのセクションを扱う』タイプのもの）。

$(document).ready(function() { 

    // Create the main View Model 
    var vm = { 
     loginVm: new LoginViewModel(), 
     registerVm: new RegisterViewModel(), 
     layoutVm: new LayoutViewModel() 
    } 

    // Get the Reference data 
    var uri = '/api/Reference/GetTimezones'; 
    $.getJSON({ url: uri, contentType: "application/json" }) 
      .done(function (data) { 
       vm.registerVm.Timezones(data); 
      }); 

    // Bind. 
    ko.applyBindings(vm); 

}); 

を私のログインモデルの後は、 『ログイン』メソッドが完了すると、私は設定したいですメニュー・モデルと同様に、いくつかの他のユーザ情報内の値を「IsAthenticated」。

をだから私のログインモデルでは、私はサインインの方法を持っている。

$.post({ url: uri, contentType: "application/json" }, logindata) 
    .done(function (data) { 
     toastr[data.StatusText](data.DisplayMessage, data.Heading); 
     if (data.StatusText == 'success') { 
      alert($parent.layoutVm.IsAuthenticated()); 
     } 
     else { 
     } 
    }) 
    .fail(function() { 
     toastr['error']("An unexpected error has occured and has been logged. Sorry about tbis! We'll resolve it as soon as possible.", "Error"); 
    }); 

警告コード私のテストである。私はのIsAuthenticatedプロパティへのアクセス（および設定）を望むlayoutVmモデルそれは私のメインのViewモデルの子モデルの1つです。

ただし、 "$ parent"は定義されていません。

loginVmからlayoutVmの値を更新するにはどうすればよいですか？

Answer 1

$parentは、データバインド（すなわち、結合ハンドラへ）の評価中にしか入手できないbinding context、の一部です。

あなたのビューモデル構造では、モデル間でコミュニケーションをとる方法を考え出す必要があります。たとえば、親ビューモデルを渡すか、共有オブザーバブルを渡すなどします。私があなたの前の質問に答えたように、あなたが記述している問題はdata-bind="visible: $root.userVM.IsAuthenticated"を使って解決することができます。

もう1つのアプローチをご希望の場合は、の共有方法の例を参照してください。ビューモデル間で観察可能です。子ビューモデルのそれぞれはまた、書き込み権限を持っていることを

var ChildViewModel = function(sharedObs) { 
 
    this.myObs = sharedObs; 
 
    this.setObs = function() { 
 
    this.myObs(!this.myObs()); 
 
    }.bind(this); 
 
} 
 

 
var RootViewModel = function() { 
 
    this.myObs = ko.observable(false); 
 

 
    this.vm1 = new ChildViewModel(this.myObs); 
 
    this.vm2 = new ChildViewModel(this.myObs); 
 
    this.vm3 = new ChildViewModel(this.myObs); 
 
} 
 

 
ko.applyBindings(new RootViewModel());

div { width: 25%; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="with: vm1"> 
 
    <h4>vm1</h4> 
 
    <p data-bind="text: myObs"></p> 
 
    <button data-bind="click: setObs"> 
 
    flip 
 
    </button> 
 
</div> 
 
<div data-bind="with: vm2"> 
 
    <h4>vm2</h4> 
 
    <p data-bind="text: myObs"></p> 
 
    <button data-bind="click: setObs"> 
 
    flip 
 
    </button> 
 
</div> 
 
<div data-bind="with: vm3"> 
 
    <h4>vm3</h4> 
 
    <p data-bind="text: myObs"></p> 
 
    <button data-bind="click: setObs"> 
 
    flip 
 
    </button> 
 
</div>

注意、あなたが誤って、観察