$root 和 $parent 有什么区别？

Question

我正在学习 KnockoutJS，但我不明白$root和$parent用法之间的区别。 请参阅此 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是指通过ko.applyBindings应用于 DOM 的视图模型；
• $parent指的是直接的外部作用域；

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

或者，用相关文档的话来说：

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

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

• $data ：这是当前上下文中的视图模型对象。 在根上下文中，$data 和 $root 是等价的。

如果您将视图模型嵌套在多个级别，您只会看到实际的差异，否则它们将等同于同一件事。

它的好处很容易证明：

 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是不同的，这取决于你嵌套的深度。