认识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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
JScript实现地址选择功能
Aug 15 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
详解如何在Vue项目中导出Excel
Apr 19 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 中的批处理的实现
2007/06/14 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
如何利用python查找电脑文件
2018/04/27 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
开工仪式主持词
2014/03/20 职场文书
教师演讲稿大全
2014/05/16 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
病房管理制度范本
2015/08/06 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis