$ root和$ parent之间有什么区别？

Question

我正在学习KnockoutJS，但我不明白$root和$parent的用法之间的区别。请参阅this jsfiddle，或下面的代码：

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

在上面的代码$root和$parent都用于相同的目的：指外范围可变。我只是想知道$root和$parent用法之间是否有区别？如果是，那么请帮助我理解正确用法的一个好例子。

Answer 1

所不同的是简单的：

• $root是指施加到DOM与ko.applyBindings视图模型;
• $parent指的是直接的外部范围;

或者，在视觉上，从$data的角度：

或者，在字the relevant documentation：

• $parent：这是在视图中的模型对象父上下文，即当前上下文外面的父上下文。

• $root：这是根上下文中的主视图模型对象，即最上面的父上下文。它通常是传递给ko.applyBindings的对象。它相当于$parents[$parents.length - 1]。

你只看到一个实际的区别，如果你有嵌套多个级别视图模型，否则他们将达到同样的事情。

它的好处是相当简单的证明：

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>

的$root始终是相同的。 $parent是不同的，这取决于你的嵌套程度。