$root 和 $parent 有什么区别? [英] What is the difference between $root and $parent?
问题描述
我正在学习 KnockoutJS,但我不明白 $root
和 $parent
用法之间的区别.请参阅
或者,用相关文档的话来说:
<块引用>$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 = '根视图模型';self.mainPerson = ko.observable();}var vm = new ViewModel(),爷爷 = 新人('爷爷'),爸爸 = 新人('爸爸'),son1 = new Person('marc'),son2 = new Person('john');vm.mainPerson(爷爷);爷爷.children.push(爸爸);daddy.children.push(son1);daddy.children.push(son2);ko.applyBindings(vm);
th, td { padding: 10px;边框:1px纯灰色;}
<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 模板: { name: 'person', foreach: children } --><!--/ko --><表格><tr><th>$root</th><th>$parent</th><th>$data</th></tr><!-- ko 模板: { name: 'person', data: mainPerson } --><!--/ko --></table>
$root
始终相同.$parent
是不同的,这取决于你嵌套的深度.
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());
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.
They are similar but different:
$root
refers to the view model applied to the DOM withko.applyBindings
;$parent
refers to the immediate outer scope;
Or, visually, from $data
's perspective:
Or, in words of the relevant documentation:
$parent
: This is the view model object in the parent context, the one immeditely outside the current context.
$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 toko.applyBindings
. It is equivalent to$parents[$parents.length - 1]
.
$data
: This is the view model object in the current context. In the root context, $data and $root are equivalent.
You'll only see a practical difference if you have view models nested more than one level, otherwise they will amount to the same thing.
It benefit is rather simple to demonstrate:
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>
The $root
is always the same. The $parent
is different, depending on how deeply nested you are.
这篇关于$root 和 $parent 有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!