本文纯正翻译自官网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. 为什么匿名内部类只能访问final变量【转】

    是变量的作用域的问题,因为匿名内部类是出现在一个方法的内部的,如果它要访问这个方法的参数或者方法中定义的变量,则这些参数和变量必须被修饰为final.因为虽然匿名内部类在方法的内部,但实际编译的时候, ...

  2. javascript变量问题

    CMAScript变量包含两种不同数据类型的值: 基本类型值:简单的数据段:引用类型值:可能有多个值构成的对象. 5种基本类型:Undefined,Null,Bollean,Number,String ...

  3. c#dataGridView奇偶数行变色

    dataGridView_Performance.RowsDefaultCellStyle.BackColor = Color.Bisque; dataGridView_Performance.Alt ...

  4. 网页中插入FLASH(swf文件)的html代码

    一.简单插入flash图像<embed src="你的flash地址.swf"width="300" height="220"> ...

  5. 链表反转 (Multi-method)

    链表反转是链表相关问题最基础的知识,做完LeetCode中LinkedList后才会有这种体会,因为ACM算法中不会涉及这一部分.解决这一问题有多种方法,在面试中面试官通常也会要求写出多种.包括sta ...

  6. 用wordpress搭建个人博客

    一.安装WordPress所需的开发环境. 1.安装apache yum install httpd 2.安装mysql 可参照我的另一篇文章:http://www.cnblogs.com/kings ...

  7. cordova for ios(android一样)添加插件

    1.进入当前工程文件夹 终端:cd ~/Desktop/ cd piao 2.添加插件 :cordova plugin add Basic device information (Device API ...

  8. javadoc错误: 编码gbk的不可映射字符

    在使用Eclipse进行javadoc的导出时,提示“编码 GBK 的不可映射字符”,应该就是中文注释Eclipse不认,需要在调用javadoc.exe的时候传递编码集告诉它采用什么编码去生成jav ...

  9. IEnumerable<IEnumerable<string>>结构解析通用解决方案(支持指定属性顺序)

    一.前言 类似如下字符串 "ID", "NameValue", "CodeValue", "ExchangeTypeValue&q ...

  10. 我的ORM之十一 -- 缓存

    我的ORM索引 对某一个查询频繁重复,应该使用缓存. 缓存应该是可以配置. 配置 Web.config: <configuration> <configSections> &l ...