knockoutJS学习笔记07:绑定上下文

  所谓绑定上下文就是当前绑定(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 关键字在属性多的时候可以简写代码,通过指明当前上下文,让语义更加清晰,阅读起来更加方便。

时间: 2024-08-21 03:48:09

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

C++ GUI Qt4学习笔记07

C++ GUI Qt4 qtc++scrollobject编程 事件(event)是由串口系统或者Qt自身产生的,用以响应所发生的各类事情.当用户按下或者松开键盘或者鼠标上的按键时,就可以产生一个键盘或者鼠标事件:当某个窗口第一次显示的时候,就会产生一个绘制事件.用来告知窗口需要重绘制它本身,从而使得该窗口可见. 使用Qt进行编程开发时,基本不需要考虑事件,Qt窗口部件都会发射信号.但是当我们需要编写自己的自定义窗口部件,或者是当我们希望改变已经存在的Qt窗口部件的行为时,事件就变得非常有用了.

学习笔记 07 --- JUC集合

学习笔记 07 --- JUC集合 在讲JUC集合之前我们先总结一下Java的集合框架,主要包含Collection集合和Map类.Collection集合又能够划分为LIst和Set. 1. List的实现类主要有: LinkedList, ArrayList, Vector, Stack. (01) LinkedList是双向链表实现的双端队列:它不是线程安全的.仅仅适用于单线程. (02) ArrayList是数组实现的队列,它是一个动态数组.它也不是线程安全的,仅仅适用于单线程. (03

JS学习笔记-事件绑定

一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

《机电传动控制》学习笔记-07

<机电传动控制>学习笔记07 胡恒谦 机卓1301 (注:本周补上第7周的学习笔记) PLC的编程元件: PLC内部有许多不同功能的器件,实际上这些器件是由电子电路和存储器组成的. 1.  输入继电器X 输入继电器由输入电路和输入寄存器组成,输入电路进行开关信号到数字量的转换,输入寄存器为映像输入信号的存储器. 2.  输出继电器Y 输出继电器由输出电路和输出寄存器组成.为适应不同的负载,输出电路一般有晶体管.晶闸管和继电器输出三种方式. 3.  定时器T 定时器又称时间继电器,由设定值寄存器

Ext.Net学习笔记07:Ext.Net DirectMethods用法详解

前面两篇内容中,我们看到了DirectEvents方便调用服务器端方法.DirectEvents调用WebService方法的使用方法,今天我们来看看DirectMethods,这家伙可比DirectEvents更加灵活了,它可以像调用JS方法一样来异步调用服务器端的方法. 使用DirectMethods在JS中调用C#方法 我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法. 来看一个例子吧: [DirectMethod] publ

KnockoutJS学习笔记10:KonckoutJS foreach绑定

KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: peop

stm32寄存器版学习笔记07 ADC

STM32F103RCT有3个ADC,12位主逼近型模拟数字转换器,有18个通道,可测量16个外部和2个内部信号源.各通道的A/D转换可以单次.连续.扫描或间断模式执行. 1.通道选择 stm32把ADC转换分成2个通道组:规则通道组相当于正常运行的程序:注入通道组相当于中断.程序初始化阶段设置好不同的转换组,系统运行中不用变更循环转换的配置,从而达到任务互不干扰和快速切换. 有16个多路通道.可以把转换组织成两组:规则组和注入组.在任意多个通道上以任意顺序进行的一系列转换构成成组转换.例如,可

knockoutjs学习笔记:显示绑定

从何而来 本系列摘抄自knockoutjs官方文档,同时结合自身项目使用记录心得. 目标 knockoutjs实现CSS显示的绑定 例子 <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script type="text

knockoutJS学习笔记06:ko数组与模板绑定

前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对象,用的是ko.observable:有时候后台返回的是一个列表,也就是数组,这个时候就需要用监控数组了.监控数组与监控属性几乎一样,只不过它是一个数组对象,拥有数组的特点.例如:创建一个简单的监控数组: var arr = ko.observableArray(); 也可以开始就进行初始化: ar