Knockout学习笔记之二($root,$parent及$data的区别)

2024-01-02 00:08

本文主要是介绍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的区别)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/560859

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

Before和BeforeClass的区别及说明

《Before和BeforeClass的区别及说明》:本文主要介绍Before和BeforeClass的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Before和BeforeClass的区别一个简单的例子当运行这个测试类时总结Before和Befor

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.