所谓绑定上下文就是当前绑定(dat-bind)所使用到的对象(ViewModel)。在单个对象绑定的情况下是很容易理解的,但对象可能是复杂的类型,嵌套很多层,这个时候每层都有自己的上下文对象,理解起来就不是很方便了。ko通过上下文关键字,让层次间的关系变得更加清晰,相互访问变得更加简单。

一、$data 与 $index

  上一篇介绍了ObservableArray和template,通常我们通过对象属性进行绑定,例如:data-bind="text:属性名称";但如果数组只是简单格式呢,例如["tom","jack","lucy"],这个时候可以用ko的几个上下文来实现。

  $data 表示当前对象。下面的$data就表示 person对象。

    <p>姓名:<span data-bind="text:$data.name"></span>,年龄:<span data-bind="text:$data.age"></span></p>
function Person(name,age){
this.name = name;
this.age = age;
}
var person = new Person("tom",18);
ko.applyBindings(person);

  而对于["tom","jack","lucy"] 数组,$data 就是每个项的值。

  $index 表示当前下标。例子:

    <ul data-bind="foreach:arr">
<li><span data-bind="text:$index"></span>:<span data-bind="text:$data"></span></li>
</ul>
var arr = ["tom","jack","lucy"];
ko.applyBindings(arr);

二、$parent、$parents、$root

  $parent 表示父ViewModel。例如:

    <ul data-bind="foreach:data">
<li>
<p data-bind="text:name"></p>
<ul data-bind="foreach:contains">
<li>
<p><span data-bind="text:name"></span>属于<span data-bind="text:$parent.name"></span></p>
</li>
</ul>
</li>
</ul>
var data = [
{name:"水果",contains:[{name:"苹果",work:"苹果的作用"},{name:"香蕉",work:"香蕉的作用"}]},
{name:"蔬菜",contains:[{name:"青菜",work:"青菜的作用"},{name:"白菜",word:"白菜的作用"}]}
];

  内部的 ul 的ViewModel是 contains 对象,之前我们用as 指定别名来访问data[i]的name属性,这里也可以直接通过$parent.name访问上层的ViewModel的name属性。

  $parents 表示所有父ViewModel集合。这是一个数组,$parents[0] 就是父ViewModel,也就是 $parent;$parenrs[1] 就是父的父ViewModel...。

  $root 表示根ViewModel。上面的例子,$parent 和 $root 是一样的,都表示 data 对象。如第一个例子,如果此时是在根部的话,那么 $root 与 $data 就是一样的。

三、$parentContext

  表示上层的具体数据。$parent表示父ViewModel,$parentContext.$data 就可以访问这个ViewModel。如果要获得父 $index,则必须通过$parentContext.$index。

四、with 关键字

  指定当前上下文,例如:

    <div data-bind="with:info">
<p data-bind="text:name"></p>
<p data-bind="text:age"></p>
</div>

  这样就不用老是写 info.name,info.age 了,在数据复杂时,可以简写代码。

五、总结

  以上就是ko上下文几个常用的关键字,$data, $index, $parent, $root 在复杂数据类型时特别有用; with 关键字在属性多的时候可以简写代码,通过指明当前上下文,让语义更加清晰,阅读起来更加方便。

knockoutJS学习笔记07:绑定上下文的更多相关文章

  1. 学习笔记 07 --- JUC集合

    学习笔记 07 --- JUC集合 在讲JUC集合之前我们先总结一下Java的集合框架,主要包含Collection集合和Map类.Collection集合又能够划分为LIst和Set. 1. Lis ...

  2. 机器学习实战(Machine Learning in Action)学习笔记————07.使用Apriori算法进行关联分析

    机器学习实战(Machine Learning in Action)学习笔记————07.使用Apriori算法进行关联分析 关键字:Apriori.关联规则挖掘.频繁项集作者:米仓山下时间:2018 ...

  3. KnockoutJS学习笔记10:KonckoutJS foreach绑定

      KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...

  4. KnockoutJs学习笔记(五)

    作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...

  5. OpenCV 学习笔记 07 目标检测与识别

    目标检测与识别是计算机视觉中最常见的挑战之一.属于高级主题. 本章节将扩展目标检测的概念,首先探讨人脸识别技术,然后将该技术应用到显示生活中的各种目标检测. 1 目标检测与识别技术 为了与OpenCV ...

  6. [Golang学习笔记] 07 数组和切片

    01-06回顾: Go语言开发环境配置, 常用源码文件写法, 程序实体(尤其是变量)及其相关各种概念和编程技巧: 类型推断,变量重声明,可重名变量,类型推断,类型转换,别名类型和潜在类型 数组: 数组 ...

  7. stm32寄存器版学习笔记07 ADC

    STM32F103RCT有3个ADC,12位主逼近型模拟数字转换器,有18个通道,可测量16个外部和2个内部信号源.各通道的A/D转换可以单次.连续.扫描或间断模式执行. 1.通道选择 stm32把A ...

  8. [原创]java WEB学习笔记07:关于HTTP协议

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  9. Bash脚本编程学习笔记07:循环结构体

    本篇中涉及到算术运算,使用了$[]这种我未在官方手册中见到的用法,但是确实可用的,在此前的博文<Bash脚本编程学习笔记03:算术运算>中我有说明不要使用,不过自己忘记了.大家还是尽量使用 ...

随机推荐

  1. Objective-C 关键字:retain, assgin, copy, readonly,atomic,nonatomic

    声明式属性的使用:声明式属性叫编译期语法 @property(retain,nonatomic)Some *s; @property(参数一,参数二)Some *s; 参数1:retain:修饰引用( ...

  2. 基本排序算法——冒泡排序java实现

    冒泡排序是原理最简单的一种排序算法,具体思想就不多说了,代码如下: eclipse4.3中编译通过 package sort.basic; import java.util.Arrays; publi ...

  3. 详细解读DialogFragment

    原博客地址:http://www.cnblogs.com/tianzhijiexian/p/4161811.html 相信看这篇文章的人都应该知道android中的Dialog了吧,如果对于Dialo ...

  4. Ignite安装配置——上篇

    Ignite介绍 Ignite 是SolarWinds公司开发的一款数据库性能监控.性能分析并提供优化解决方案的性能检测分析工具,Ignite配置简单.方便:它会收集实时会话数据.服务器资源使用情况, ...

  5. 深度解析mysql登录原理

    使用mysql数据库的第一步必然是建立连接登录,然后在上面执行SQL命令.无论是通过mysql的客户端,还是通过C-API,JDBC标准接口连接数据库,这个过程一定少不了.今天我们聊一聊mysql登陆 ...

  6. JVM之CMS收集器

    CMS(Concurrent Mark Sweep) 最短回收停顿,适合维持响应时间上的要求. 初始标记 Initial mark:标记GC Roots能够关联到的对象.stop-mark. 并发标记 ...

  7. JSP分页显示实例(基于Bootstrap)

    首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...

  8. 基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记

    基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记 飞翔的蜘蛛人 注1:本人新手,文章中不准确的地方,欢迎批评指正 注2:知识储备应达到Linux入门级水平 ...

  9. NAS硬盘损坏拷贝时的处理办法及 UBUNTU下遍历删除某目录的方法

    NAS突然挂了,说是硬盘坏了,我不信呀,换块上去先.原来的硬盘要经过一定的操作才能使用 官方给出的解决方案:我如何使用电脑来还原存储在 DiskStation 中的数据? 然后,你再拷贝到新的NAS中 ...

  10. Apple Watch的课表应用iOS源码项目

    源码Class-Timetable,小清新风格的课表应用,可以按周或按天显示课表.按天显示时,左右滑动屏幕可以查看前一天或后一天的课表.功能:可以双模式切换(按天显示,按周显示,可以和 Apple W ...