认识Knockout及如何使用Knockout绑定上下文


Posted in Javascript onDecember 25, 2015

Knockout介绍

Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model、view、viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型来创建丰富的、响应式的用户界面。

Knockout有三大核心特性:

    1.优雅的依赖跟踪(Elegant dependency tracking):任何时候数据模型的变化都会自动更新相应的UI部分;

    2.声明式绑定(Declarative bindings) : 简单的将UI和你的数据模型关联起来,你就可以创建复杂的动态UI;

    3.高度可扩展性(Trivially extensible) : 只需几行代码实现一个自定义的行为来作为声明式绑定;

其他优点:

    1.纯净的javascript代码;

    2.可以随时添加到你现有的web应用中;

    3.轻量级,GZIP后只有13K;

    4.能够工作于几乎所有主流浏览器((IE 6+, Firefox 2+, Chrome, Safari, Edge, others);

ko采用的是MVVM设计模式,即model view viewModel。

简单的例子

There are <span data-bind="text: myItems().length"></span> items

就是这么简单,你不必写代码来更新text内容,它会在数组长度改变时自动更新,与此类似,如果我们想利用数组长度控制按钮的可用性仅仅需要:

<button data-bind="enable: myItems().length < 5">Add</button>

下面接着给大家介绍使用Knockout绑定上下文

Binding context

binding context是一个保存数据的对象,你可以在你的绑定中引用它。当应用绑定的时候,knockout自动创建和管理binding context的继承关系。这种层次结构的根引用你指定的viewModel参数(ko.applyBindings(viewModel))。

然后每次使用一个控制流如with或者foreach 来创建一个子节点binding context引用嵌套的viewModel data。

$parent

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div>

$parents

这是一个数组,代表了所有的父节点view models

$parent[0] : 代表父节点;

$parent[1] : 代表祖父节点;

$parent[1] : 代表曾祖父节点;

.....以此类推

$root

它是root context的根节点视图模型对象,一般是通过ko.applyBindings指定的,相当于$parents[$parents.length - 1]。

$component

如果你在一个特定的组件模板的上下文中,$component指定的是那个component,它的指定组件相当于$root,在嵌套的组件情况下,它代表了最邻近的一个组件。

$data

它代表了当前上下文中的viewModel对象,$data和$root是相当的。在嵌套的binding context中,这个参数将设置到当前的数据项。

$data是非常有用的,例如,当你想引用viewModel本身而不是viewModel的属性的时候。

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

它是一个在foreach绑定中的数组的从0开始的索引条目。不想其他的context属性,$index是observable的,即会随着数组item的更新而更新。

$parentContext

指定了父节点级别的binding context对象,与$parent不同的是,它是在父节点中指定数据而不是binding context。

$rowData

它是在当前上下文中,原viewModel的值,通常它相当于$data,但是,如果viewModel被ko以observable来修饰,$data是unobservable的,而$rowData是observable的。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Javascript注入技巧
Jun 22 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
详解Document.Cookie
Dec 25 #Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 #Javascript
JQuery datepicker 用法详解
Dec 25 #Javascript
一道JS前端闭包面试题解析
Dec 25 #Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 #Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 #Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python tkinter实现屏保程序
2019/07/30 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
上班睡觉检讨书
2014/01/09 职场文书
一体化教学实施方案
2014/05/10 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
担保书格式范文
2015/09/22 职场文书
python基础之类属性和实例属性
2021/10/24 Python
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
python turtle绘图
2022/05/04 Python