Was ist der Unterschied zwischen $ root und $ parent?

Question

Ich lerne KnockoutJS, aber ich verstehe nicht den Unterschied zwischen $root und $parent Nutzung. Bitte beachten Sie this jsfiddle oder den Code unten:

<div data-bind="foreach:mainloop"> 
    $data Value: <span data-bind="text:$data.firstName"></span> 
        <span data-bind="text:$data.lastName"></span> --(1) 

    <br/> 
    $parent Value: <span data-bind="text:firstName"> </span> 
        <span data-bind="text:$parent.lastName"></span> 
    <br/> 
    $root Value: <span data-bind="text:firstName"></span> 
       <span data-bind="text:$root.lastName"></span> 
    <br/> 
     <hr/> 
</div> 

var mainLoopModel = function() { 
    var self = this; // Root Level scope 
    self.mainloop = ko.observableArray([{ 
     'firstName': 'jhon' 
    }, { 
     'firstName': 'sam' 
    }]); 
    self.lastName = ko.observable('peters'); 
    /*if you remove $data before lastName in note (1) you get undefined error because because mainloop dont have lastName root model has lastName so you have to access using parent or higher level */ 
} 

ko.applyBindings(new mainLoopModel()); 

In dem obigen Code $root und $parent beide sind für den gleichen Zweck verwendet: In dem äußeren Umfang Variable. Ich möchte nur wissen, gibt es einen Unterschied zwischen den $root und $parent Nutzungen? Wenn ja, dann helfen Sie mir bitte mit einem guten Beispiel für die korrekte Verwendung zu verstehen.

Answer 1

Der Unterschied ist einfach:

• $root zur Ansicht Modell auf das DOM mit ko.applyBindings angewendet bezieht;
• $parent bezieht sich auf den unmittelbaren äußeren Umfang;

Oder visuell, von $data ‚Sicht:

Oder in Worten von the relevant documentation:

• $parent: Dies ist die Ansicht Modellobjekt in der Elternkontext, der sofort außerhalb des aktuellen Kontexts liegt.

• $root: Dies ist das Hauptansichtsmodellobjekt im Stammkontext, d. H. Der oberste übergeordnete Kontext. Es ist normalerweise das Objekt, das an ko.applyBindings übergeben wurde. Es entspricht $parents[$parents.length - 1].

Sie werden nur einen praktischen Unterschied sehen, wenn Sie Ansicht Modelle verschachtelt mehr als eine Ebene haben, sonst werden sie auf dasselbe hinaus.

Es Nutzen ist ziemlich einfach zu demonstrieren:

var Person = function(name) { 
 
    var self = this; 
 
    self.name = ko.observable(name); 
 
    self.children = ko.observableArray([]); 
 
} 
 
    
 
var ViewModel = function() { 
 
    var self = this; 
 
    self.name = 'root view model'; 
 
    self.mainPerson = ko.observable(); 
 
} 
 

 
var vm = new ViewModel(), 
 
    grandpa = new Person('grandpa'), 
 
    daddy = new Person('daddy'), 
 
    son1 = new Person('marc'), 
 
    son2 = new Person('john'); 
 

 
vm.mainPerson(grandpa); 
 
grandpa.children.push(daddy); 
 
daddy.children.push(son1); 
 
daddy.children.push(son2); 
 

 
ko.applyBindings(vm);

th, td { padding: 10px; border: 1px solid gray; }

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

 
<script type="text/html" id="person"> 
 
    <tr> 
 
    <td data-bind="text: $root.name"></td> 
 
    <td data-bind="text: $parent.name"></td> 
 
    <td data-bind="text: $data.name"></td> 
 
    </tr> 
 
    <!-- ko template: { name: 'person', foreach: children } --><!-- /ko --> 
 
</script> 
 

 
<table> 
 
    <tr> 
 
    <th>$root</th> 
 
    <th>$parent</th> 
 
    <th>$data</th> 
 
    </tr> 
 
    <!-- ko template: { name: 'person', data: mainPerson } --><!-- /ko --> 
 
</table>

Die $root ist immer gleich. Die $parent ist unterschiedlich, je nachdem wie tief Sie verschachtelt sind.