我正在学习 KnockoutJS,但我不明白两者之间的区别$root
and $parent
用法。请参见这个jsfiddle http://jsfiddle.net/supercool/2gt4K/27/,或下面的代码:
<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
and $parent
两者都用于相同的目的:引用外部作用域变量。我只是想知道两者之间有什么区别吗$root
and $parent
用途?如果是,请通过一个正确使用的好例子帮助我理解。
它们相似但又不同:
-
$root
指的是应用于 DOM 的视图模型ko.applyBindings
;
-
$parent
指直接外部范围;
或者,从视觉上看,$data
的观点:
或者,用一句话来说相关文件 http://knockoutjs.com/documentation/binding-context.html:
$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>
The $root
总是一样的。这$parent
是不同的,取决于你嵌套的深度。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)