本文纯正翻译自官网API文档。其中包含一下个人理解。

官网API地址:http://knockoutjs.com/documentation/introduction.html

简介

Knockout(简称KO)是一个JavaScript库,可以帮助您用干净的底层数据模型创建丰富的反应迅速显示和编辑用户界面。任何时候你有UI的部分是动态更新(例如,根据用户的行为或者外部数据源的变化而变化),用KO可以帮助您实现起来更简单。

KO主要功能

  • 优雅的依赖性跟踪 -当数据模型变化时,自动更新你的UI。
  • 声明绑定 -一个浅显的方式来将UI的部分连接到你的数据模型。您可以轻松地构建利用任意嵌套绑定上下文来组成复杂的动态用户界面。
  • 扩展 -使用短短的几行代码重用实现自定义行为作为。

KO的一些好处

  • 纯JavaScript库 -适用于任何服务器或客户端技术
  • 可以在您现有的Web应用程序的顶部加入,而无需重大的架构改变
  • 紧凑型 –体积只有13KB
  • 适用于任何主流浏览器的(IE 6 +,火狐2 +,Chrome浏览器,Safari浏览器,其他)

熟悉Ruby on Rails的,ASP.NET MVC,或者其他MV *技术的开发人员可能会看到MVVM作为MVC与声明语法实时的形式。在另一种意义上,你可以把KO的作为一般的方法,使用户界面进行编辑JSON数据。

KO与Jquery的关系

每个人都喜欢的jQuery!jQuery是一个极好的低级别的方式来操纵网页中的元素和事件处理程序。KO解决不同的问题。

只要你的用户界面变得复杂而有一些重叠的行为,事情可能会变得棘手和维护成本变得昂贵,如果你只使用jQuery。举一个例子:你显示的项目清单,说明在该列表中的项目数,并希望当有超过500项的减少后仅启用"添加"按钮。jQuery的不具有基本的数据模型的一个概念,所以要得到你必须从元素的一个表中的数字或DIV具有一定CSS类的数量推断它的项数。也许项目数显示在某些SPAN标记中,当用户添加一个项目你要记得更新SPAN的文字。你还必须记住禁用"添加"按钮当元素的数量大于5之后。

KO来弥补这一切

相对之前提到的。如果使用KO则容易得多。比如JavaScript数组,然后用foreach绑定这个数组转换成表或设置到DIV。每当数据模型变化时,用户界面也会随之变化(你不必弄清楚后台是如何注入新的TR)。让UI的其余部分保持同步。例如,您可以声明绑定到一个SPAN显示项目数,代码如下:

你不必编写代码来更新它; 它更新的数据源来自myItems数组的变化。同样,为了使"添加"按钮在项目数量小于5时启用,只需要写如下代码:

总结

KO与jQuery并非竞争关系。KO只是提供互补,通过数据监控方式将数据模型链接到的UI。KO本身不依赖jQuery,但可以与jQuery同时使用。

KnockoutJS 3.X API 第一章 简介的更多相关文章

  1. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

  2. KnockoutJS 3.X API 第二章 数据监控(1)视图模型与监控

    数据监控 KO的三个内置核心功能: 监控(Observable)和依赖性跟踪(dependency tracking) 声明绑定(Declarative bindings) 模板(Templating ...

  3. UNIX网络编程卷1 第一章 简介 读书笔记。

    基本没讲什么,一点点计算机网络发展史,一点点socket()简单介绍,最重要的是1.3节协议无关性. 协议无关性: 贯穿整本书的一个重要特性,他主要强调的是 socket是网络协议无关的编程接口. s ...

  4. Javascript模式(第一章简介)------读书笔记

    一:模式 模式是一个通用问题的解决方案,可以提供一个更好的实践经验.有用的抽象化表示和解决一类问题的模板. 本书主要讨论如下三种类型的模式 1 设计模式:可复用面向对象软件的基础,包括singleto ...

  5. KnockoutJS 3.X API 第二章 数据监控(2)监控属性数组

    监控属性数组 如果要对一个对象检测和响应变化,会使用监控属性.如果要对一个序列检测并监控变化,需要使用observableArray(监控属性数组).这在你显示或编辑多个值,需要用户界面的部分反复出现 ...

  6. python3 第一章 - 简介

    1.什么是python 引用官方的话:Python是一种易于学习,强大的编程语言.它具有高效的高级数据结构,并通过简单而有效的方法来进行面向对象编程.Python的优雅语法和动态类型,以及其解释性质, ...

  7. UNP学习笔记(第一章 简介)

    环境搭建 1.下载解压unpv13e.tar.gz 2.进入目录执行 ./configurecd lib //进入lib目录make //执行make命令 3.将生成的libunp.a静态库复制到/u ...

  8. 《JAVA NIO》第一章 简介

    1.2 CPU已不再是束缚 相反,是JVM 自身在I/O 方面效率欠佳.操作系统与Java 基于流的I/O模型有些不匹配. 操作系统要移动的是大块数据(缓冲区),这往往是在硬件直接存储器存取(DMA) ...

  9. Spring in Action --- 第一章 简介

    简化java开发 基于POJO的轻量级和最小入侵性编程 通过依赖注入和面向接口实现松耦合 基于切面和管理进行声明式编程 通过切面和模板减少样板式代码 bean的生命周期 Spring对bean进行实例 ...

随机推荐

  1. 用Java程序判断是否是闰年

    我们知道,(1)如果是整百的年份,能被400整除的,是闰年:(2)如果不是整百的年份,能被4整除的,也是闰年.每400年,有97个闰年.鉴于此,程序可以作以下设计: 第一步,判断年份是否被400整除, ...

  2. python基础整理笔记(九)

    一. socket过程中注意的点 1. 黏包问题 所谓的黏包就是指,在TCP传输中,因为发送出来的信息,在接受者都是从系统的缓冲区里拿到的,如果多条消息积压在一起没有被读取,则后面读取时可能无法分辨消 ...

  3. Spring Web

    Spring MVC的初始化: WEB容器加载后,通过使用DispatcherServlet拦截器加载IOC容器到WEB容器中,并通过ContextLoderListener将其初始化, 因为Spri ...

  4. php 用户ip的获取

    $_SERVER 这个变量我很喜欢,里面有很多服务器和用户的配置.资料.特别是在获取用户ip 的时候 直接$_SERVER['REMOTE_ADDR'] 就可以或许,但这是没有使用 反向代理服务器的情 ...

  5. SpringMVC入门配置和简单实现

    web.xml的配置 <!-- springmvc中央控制器 --> <servlet> <servlet-name>springmvc</servlet-n ...

  6. 使用Axure来仿真Vogue网站

    用户体验包括三部分:用户研究.视觉设计和交互设计.按顺序进行,在用户研究和视觉设计之后,开始交互设计,Axure是最好的交互设计的软件. Vogue是著名的奢侈品品牌,网站设计“高大上”,用Axure ...

  7. LINUX下常用SHELL指令

    Linux Shell常用shell命令 一.文件.目录操作命令 1.ls命令 功能:显示文件和目录的信息 ls 以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示 ...

  8. Python list嵌套 三维数组

    cores_multicast = [[] for i in xrange(64)] temp_list = [0, 1] temp_list2 = [0, 3] cores_multicast[0] ...

  9. 以 Composer 的方式在 PhpStorm 中添加代码审查工具 Code Sniffer

    一.前提条件 Windows 操作系统 可以在本地运行的 PHP 环境,个人用的是 laragon PhpStorm Composer 二.设置步骤 (一)下载 Code Sniffer 主要使用 P ...

  10. HTML5-表格

    表格:表头<caption>,行<tr>,列<td>,标题<th> 属性:cellpadding="10" cellspacing= ...