认识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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
js登录弹出层特效
Mar 07 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
JavaScript实现动态生成表格
Aug 02 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
一步一步学习PHP(8) php 数组
2010/03/05 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
js播放wav文件(源码)
2013/04/22 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue跨域解决方法
2017/10/15 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
用Python创建声明性迷你语言的教程
2015/04/13 Python
python之PyMongo使用总结
2017/05/26 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python实现贪吃蛇游戏
2020/03/21 Python
python实现转圈打印矩阵
2019/03/02 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
历史学专业毕业生求职信
2013/09/27 职场文书
自我推荐书
2013/12/04 职场文书
四群教育工作实施方案
2014/03/26 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
绿色环保演讲稿
2014/05/10 职场文书
理财学专业自荐书
2014/06/28 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python