以下是我从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. Wordpress实现站搜索

    wordpress内置的搜索表单如下 <form role="search" method="get" id="searchform" ...

  2. Win10如何设置防火墙开放特定端口 windows10防火墙设置对特定端口开放的方法

    Win10防火墙虽然能够很好地保护我们的系统,但同时也会因限制了某些端口,而给我们的操作带了一些不便.对于既想使用某些端口,又不愿关闭防火墙的用户而言,在Win10系统中设置防火墙开放特定端口就非常必 ...

  3. spark的安装

    官方安装地址:http://spark.apache.org/docs/latest/spark-standalone.html 准备 1.三台机器(m2.m3.m4) 2.m2位master, m3 ...

  4. UE4 自定义物理表面类型（Surface Type）

    如果想在UE4中实现在接触到不同物体表面时发出不同的声音或者效果时,比如人在不同的表面上速度会不同,子弹打到不同的表面时会出现不同的特效等,我们可以使用UE4中的表面类型来实现(Surface Typ ...

  5. 《30天自制操作系统》15_day_学习笔记

    harib12a: 这一部分我们来尝试两个任务的切换.下面我们一步一步的看: 1.定义TSS任务状态段(task statuc segment):定义的一种段,需要在GDT中定义使用 //TSS任务状 ...

  6. matlab中动态绘图并保存为视频的小例子

    如题,多的就不说了,先上一个效果: 每隔0.1秒,绿色的直线转动一个角度. 再看看代码如何实现: fuction main clear; clc; %%%%%%%%%%%%%%%%%%%%%%%%%% ...

  7. Python 函数式编程 & Python中的高阶函数map reduce filter 和sorted

    1. 函数式编程 1)概念 函数式编程是一种编程模型,他将计算机运算看做是数学中函数的计算,并且避免了状态以及变量的概念.wiki 我们知道,对象是面向对象的第一型,那么函数式编程也是一样,函数是函数 ...

  8. window.event

    e = e || window.event是我们在做事件处理时候区分IE和其他浏览器事件对象时常用的写法.但是这行兼容性代码有没有必要出现在所有的事件句柄中呢?标准事件调用方式需要这行代码吗?下边我们 ...

  9. ajax 使用

    写在前面的话: 用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了. 以前记的也不怎么清楚,这次就重新完整的 ...

  10. 通过setDB2Client*来方便的使用TRACE调优jdbc程序

    一般来说通过TRACE的report来分析DDF的性能问题的话,基本对DBA都是噩梦一样.因为所有的Thread都是通过DDF一个类型的Thread,所以不管你怎么分类,看Accounting rep ...