以下是我从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>

具体页面呈现:

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

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

Knockout学习笔记之二($root,$parent及$data的区别)的更多相关文章

  1. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  2. python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  3. knockout学习笔记10:demo

    前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了.本章作为ko学习的最后一篇,实现一个简单的demo.主要集中在ko,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个 ...

  4. ruby学习笔记(1)-puts,p,print的区别

    ruby学习笔记-puts,p,print的区别 共同点:都是用来屏幕输出的. 不同点:puts 输出内容后,会自动换行(如果内容参数为空,则仅输出一个换行符号):另外如果内容参数中有转义符,输出时将 ...

  5. bootstrap学习笔记之二

    学习表单时还是有些吃力的,主要感觉有些结构有些复杂,没有自己亲手去操作就感觉似懂非懂,所以还得自己亲手测一下. 现在开始按钮的学习. 可作为按钮使用的标签和元素有:  <a>.<bu ...

  6. Knockout学习笔记之一

    1.  四大关键理念: A. DeclarativeBindings(声明式绑定) Easily associate DOM elements with model data using a conc ...

  7. QML学习笔记之二

    //必须要导入,否则以下元素将无效 import QtQuick 1.1 //对象一:矩形Rectangle Rectangle { width: 798 height: 111 //整个Rectan ...

  8. PL/pgSQL学习笔记之二

    39.1.1 使用 PL/pgSQL的好处 SQL是 PostgreSQL和其他大多数关系型数据库作为查询语言而使用的语言.它可移植,并容易学习.但是SQL语句必须被数据库服务器逐条地执行. 这意味着 ...

  9. Android学习笔记——Menu(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就 ...

随机推荐

  1. Python开发【第三章】:Python函数介绍

    一. 函数介绍 1.函数是什么? 在学习函数之前,一直遵循面向过程编程,即根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复 ...

  2. 用nstimer实现倒计时

    用nstimer实现倒计时 // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFir ...

  3. 时光煮雨 Unity3D让物体动起来③—UGUI DoTween&Unity Native2D实现

    本文首发蛮牛,次发博客园.接系列 第一篇,第二篇,本文为第三篇,再次感谢“武装三藏”在前两篇无私且精彩的问题解答 写在最前,时光煮雨,为了怀念 以下引用曾今读过的一些教程文章 其实这3种动画都有它特定 ...

  4. C++之路进阶——codevs2933(诗人小G)

    2933 诗人小G 2009年NOI全国竞赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 小G是一个出色的诗人 ...

  5. 解决MyEclipse报错问题

    转载文章.   做NC的时候从别人那拷了个NC_DEMO结果我这报错他那没报错  import nc.bs.wfengine.engine.ext.TaskTopicResolver;  报错信息:A ...

  6. jQuery对select操作小结

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...

  7. 总结asp.net页面跳转

    ASP.NET页面跳转相关知识 一.<a>标签   1. <a href=”test.aspx”></a>   2. 这是最常见的一种转向方法; eg:  < ...

  8. html5,output标签应用举例

    <form action="" id="myform" oninput="num.value=parseInt(num1.value)+pars ...

  9. Objective-C基础

    1.C语言面向过程,OC面向对象 2.第一个OC程序 #import <Foundation/Foundation.h> int main(int argc, const char * a ...

  10. smarty中增加类似foreach的功能自动加载数据方法

    第一步:在Smarty_Compiler.class.php的_compile_tag函数中增加: 复制代码 代码如下: //加载数据的开始标签case 'load': $this->_push ...