Kind Ansicht Modell modying ein anderes Kind viewmodel

Question

Ich habe eine Hauptansicht Modell für meinen Bildschirm. Es besteht aus 2 Kindersichtmodellen.

Man behandelt den Registrierungsabschnitt. Man behandelt den Login-Bereich. Ein behandelt den Menüabschnitt (Wenn authentifiziert und welche Menüpunkte können angezeigt werden, sowie die „Welcome‚Benutzername‘Typ Material).

$(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); 

}); 

Nach meiner Anmeldung Modell‚Login‘Methode abgeschlossen ist, möchte ich festgelegt die „IsAthenticated“ Wert innerhalb des Menü-Modell, sowie einige andere Benutzer Info.

Also in meinem Login-Modell, habe ich eine SignIn Methode.

$.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"); 
    }); 

der Alarm Code meinen Tests ist. ich bin Ich hoffe, auf die IsAuthenticated-Eigenschaft von zugreifen (und setzen) das LayoutVM-Modell. Das ist eines der Kindmodelle in meinem Hauptansichtsmodell.

"$ parent" ist jedoch nicht definiert.

Wie kann ich Werte in der LayoutVm von meinem LoginVm aktualisieren?

Answer 1

$parent ist Teil der binding context, die bei der Auswertung der Daten-bind nur verfügbar ist, (das heißt an den Bindungs ​​handler).

In Ihrer Viewmodel-Struktur müssen Sie eine Möglichkeit finden, selbst zwischen den Modellen zu kommunizieren. Zum Beispiel durch Übergeben von übergeordneten Ansichtsmodellen oder durch Weitergabe von gemeinsam genutzten Observablen. Das Problem, das Sie beschreiben, kann gelöst werden, indem Sie data-bind="visible: $root.userVM.IsAuthenticated" verwenden, wie ich in Ihrer vorherigen Frage geantwortet habe.

Wenn Sie mit dem anderen Ansatz gehen möchten, ist hier ein Beispiel, wie teilen eine beobachtbare zwischen Viewmodels.

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>

Beachten Sie, dass jede der untergeordneten Ansicht Modelle haben auch Schreibrechte, so dass Sie vorsichtig sein müssen, werden nicht aus Versehen die beobachtbare