$ root和$ parent有什么区别? [英] What is the difference between $root and $parent?

问题描述

我正在学习KnockoutJS，但我不了解$root和$parent用法之间的区别.请参阅此jsfiddle 或以下代码:

I am learning KnockoutJS, but I do not understand the difference between $root and $parent usage. Please see this jsfiddle, or the below code:

<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用法之间有什么区别吗?如果是的话，请帮我理解一个正确用法的好例子.

In the above code $root and $parent are both used for the same purpose: to refer outer scope variable. I just like to know is there any difference between the $root and $parent usages? If yes then please help me understand with a good example for correct usage.

推荐答案

它们相似但又不同:

• $root是指通过ko.applyBindings应用于DOM的视图模型；
• $parent是指直接外部作用域；

• $root refers to the view model applied to the DOM with ko.applyBindings;
• $parent refers to the immediate outer scope;

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

Or, visually, from $data's perspective:

或者用相关文档:

• $parent:这是父上下文中的视图模型对象，即当前上下文外部的视图模型对象.

• $parent: This is the view model object in the parent context, the one immeditely outside the current context.

$root:这是根上下文(即最顶层的父上下文)中的主要视图模型对象.通常是传递给ko.applyBindings的对象.等效于$parents[$parents.length - 1].

$root: This is the main view model object in the root context, i.e., the topmost parent context. It’s usually the object that was passed to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].

$data:这是当前上下文中的视图模型对象.在根上下文中，$ data和$ root是等效的.

$data: This is the view model object in the current context. In the root context, $data and $root are equivalent.

仅当视图模型嵌套了多个级别时，您才会看到实际的区别，否则它们将构成同一事物.

证明它的好处很简单:

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是不同的，具体取决于您嵌套的深度.

The $root is always the same. The $parent is different, depending on how deeply nested you are.

这篇关于$ root和$ parent有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！