Knockout学习笔记之二（$root，$parent及$data的区别）

以下是我从Google上找到的一个例子，非常生动形象，我修改了部分代码，具体内容如下：

对于$root 与$parent的区别：

$root refers to the view model applied to the DOM with ko.applyBindings;

译：$root 是指ViewModel所应用于ko.applyBindings时所使用的DOM;

$parent refers to the immediate outer scope;

　　译：$parent 是指当前DOM元素直接的外部父类（只有一层）;

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 to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].

对于三者的区别（$root，$parent及$data）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title><script type="text/javascript" src="knockout-3.4.0.js"></script><style>th, td {padding: 10px;border: 1px solid gray;}</style><script type="text/javascript">window.onload = function () {vm.mainPerson(grandpa);grandpa.children.push(daddy);daddy.children.push(son1);daddy.children.push(son2);ko.applyBindings(vm);}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;vm= new ViewModel(),grandpa = new Person('grandpa'),daddy = new Person('daddy'),son1 = new Person('marc'),son2 = new Person('john');</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>
</head>
<body>
</body>
</html>

View Code

具体页面呈现：

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

译：$root经常是相同的，而$parent是不同的，而这种不同主要取决于你嵌套的深度。

Knockout学习笔记之二（$root，$parent及$data的区别）相关推荐

knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
MNE学习笔记（六）：Epoched data的可视化
MNE学习笔记(六):Epoched data的可视化参考文章:https://mne.tools/stable/auto_tutorials/epochs/20_visualize_epochs. ...
数据库学习笔记（一） | 数据（Data）的定义
数据库学习笔记(一) | 数据(Data)的定义和种类什么是数据(Data) 结构化数据(Structured Data) 半结构化数据(Semi-structured Data) 非结构化数据(U ...
神经网络与深度学习笔记汇总二
神经网络与深度学习笔记汇总二正交化(方便调整参数) 迭代单实数评估指标(判断几种手段/方法哪个更好) 指标选取训练集.开发集.测试集作用与用途评估指标判断算法是好是坏迁移学习总结往期回 ...
神经网络学习笔记（4）——期望与算术平均值的区别、方差与均方误差的区别
本来说直接看BP算法的代码的,但是看书的时候又确实遇到了这两个东西,所以就先记上这么一个学习笔记. 虽然这种纯数学的东西放在神经网络的学习笔记中好像也不太对,但是确实是学习神经网络的时候遇到的,所以就 ...
knockout 学习笔记
1.激活knockout ko.applayBindings() 第一个参数是激活ko时用于声明绑定的View Model的对象 (myViewModel= {personName: 'Bob',pe ...
knockout学习笔记
学习knockout路程中记下的一些容易遗忘和稍微难理解的知识点,学习地址"knockout.js爱整理" 1.<!–ko–>和<!–/ko–>的用法有时 ...
《SAS编程与数据挖掘商业案例》学习笔记之二
继续之前的读书笔记,废话少说,直奔主题. 四.连接数据库的方式 libname形式: Oracle 链接:Libname IBMSHCU oracle user=bi password=bi sch ...
Android学习笔记——Menu(二)
知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单上下文菜单提供对UI界面上的特定项或上下文框架的操作,就 ...

Knockout学习笔记之二（$root，$parent及$data的区别）

Knockout学习笔记之二（$root，$parent及$data的区别）相关推荐

最新文章

热门文章