认识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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
前端性能优化及技巧
May 06 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JS中min函数实例讲解
Feb 18 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
详解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
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
js类型检查实现代码
2010/10/29 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Python类的专用方法实例分析
2015/01/09 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python opencv摄像头的简单应用
2019/06/06 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
财务主管自我鉴定
2014/01/17 职场文书
厨师长岗位职责
2014/03/02 职场文书
社会公德演讲稿
2014/05/20 职场文书
师范生自荐信模板
2014/05/28 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
工作证明格式范文
2015/06/15 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
nginx设置资源请求目录的方式详解
2022/05/30 Servers