Knockout开发中文API系列1
从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别。
1、Knockout.js是什么?
Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。
2、KO重要特性以及优点
I、KO重要特性
- 优雅的依赖跟踪-任何时候当数据源模型发生变化时,它都能够自动的更新你UI的指定内容。
- 声明绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定,你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。
- 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。
II、其他优点:
- 纯JavaScript库-兼容任何服务器和客户端技术。
- 可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。
- 简洁-采用Gzip压缩之后只要13K。
- 兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
- 一套全面完整的规范(采用行为驱动开发)-这意味着在新的浏览器或平台中也能够很容易验证通过。
开发人员如果熟悉Ruby on Rails,Asp.net MVC 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说,你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么。
3、如何使用它?
最快速、最有趣的方式就是通过互动式教学的方式来开始学习,一旦你掌握了最基本的技巧,学习了每个在线实例,你就可以在你的项目中一展身手了。
4、KO与Jquery
KO和Jquery(prototype等)是相互竞争还是可以兼容一起使用?
每个人都很喜欢Jquery!在过去,我们不得不忍受各种不一致的DOM对象操作的API方法,Jquery的出现,很出色的代替了以往种种笨拙的框架,显得灵活易用。Jquery在Web页面元素操作和事件处理上显得相当出色并且易用,而KO是解决另外不同的问题的。
当你的UI界面稍微复杂且含有一些相同的行为的话,如果你仅仅只使用Jquery,那么UI处理上会比你想象的要复杂棘手,同时会让维护费用相当昂贵。思考这样一个例子:在一个表格里显示一个项目列表,统计表格中列表的数量,当项目列表数量小于5时启用“Add”按钮,否则就禁用。Jquery没有基本的数据模型概念,所以你想要获取项目列表的数量,你需要从表格table/tr/div这些数量上去进行推断才能知道。如果需要在某些SPAN里显示数据的数量,当添加新数据的时候,你还要记得更新这个SPAN的text。当然,你还要记住当总数>=5条的时候,你需要禁用Add按钮。然后,如果还要实现Delete功能的时候,你不得不指出哪一个DOM元素被点击以后需要改变。
5、用Knockout来实现又有何不同?
使用KO这一切都变得非常简单。它可以让你很轻易的扩展项目的复杂度,而不必担心由此产生的数据不一致问题。它仅仅只需要将你的数据转换成一个JavaScript数组,然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。每当数据数组发生变化时,UI界面会自动响应改变(你不需要指出如何插入新行
或在哪里插入),剩下的就是UI界面数据同步了。例如:你可以声明绑定如下一个SPAN显示数据数量:
- There are <span data-bind="text: myItems().count"></span> items
就是这些!你不需要写代码去更新它,它的更新依赖于数组myItems的改变。同样, Add按钮的启用和禁用依赖于数组myItems的长度,如下:
- <button data-bind="enable: myItems().count < 5">Add</button>
之后,如果你需要实现“Delete”功能,你不必去指定如何操作UI元素,只需要修改数据模型就可以了。
6、总结
总结:KO无意与jQuery这些类似的DOM 操作框架进行竞争。KO提供了一个数据模型与用户UI界面进行关联的高层次方式。KO本身不依赖jQuery,但是你可以一起同时使用jQuery, 生动平缓的UI改变需要使用jQuery。
Knockout开发中文API系列1相关推荐
- jstree中文api文档_开发中文 API 的一些策略
注:本文仅基于个人在其他英文编程语言中实现中文 API 的有限实践和见闻,对易语言等等中文编程语言的生态不甚了解,各种疏漏请指正. 如果要现在的我,选择一个英文 API 进行中文化,或者针对一种功能开 ...
- flask开发restful api系列(5)-短信验证码
我们现在开发app,注册用户的时候,不再像web一样,发送到个人邮箱了,毕竟个人邮箱在移动端填写验证都很麻烦,一般都采用短信验证码的方式.今天我们就讲讲这方面的内容. 首先,先找一个平台吧.我们公司找 ...
- phoenix 开发API系列(三)phoenix api 结合数据库
概述 介绍了 api 的各种写法之后,下面介绍构建 api 时与数据库连接的方式. 注 下面使用的工程的完整代码已经公开在: http://git.oschina.net/wangyubin/phoe ...
- phoenix 开发API系列 目录
phoenix 开发API系列(一)创建简单的http api phoenix 开发API系列(二)phoenix 各类 api 实现方式 phoenix 开发API系列(三)phoenix api ...
- Android开发-自定义View-AndroidStudio(二)遇到问题,附:ScrollView中文API
转载请注明出处: http://blog.csdn.net/iwanghang/ 我正在参加CSDN 2016博客之星评选,希望得到您的宝贵一票~ http://blog.csdn.net/vote/ ...
- UG 二次开发中文帮助文档,UFun在线帮助文档, NX API 中文帮助文档
UG 二次开发中文帮助文档,UFun在线帮助文档, NX API 中文帮助文档 在线的中文帮助文档,不用下载,网页直接查询函数: UFun函数中文帮助文档地址:http://www.ugapi.com ...
- 玩 High API 系列好文:UGC内容检测、视频智能、拍照翻译、懂天气的草地喷水头...
摘要:玩 High API 系列好文:UGC内容检测.视频智能.拍照翻译.懂天气的草地喷水头 导读:初创公司可以利用API来解决问题.了解更多场景如何玩High API?如何将API变现?请下载阿里云 ...
- 微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
- Android中文API(130) —— Html
结构 继承关系 public class Html extends Object java.lang.Object android.text.Html 类概述 该类主要用来格式化html格式的文本,像 ...
- larvel 中的api.php_Laravel API 系列教程(一): 基于 Laravel 5.5 构建 测试 RESTful API...
Laravel API 系列教程(一): 基于 Laravel 5.5 构建 & 测试 RESTful API 由 学院君 创建于2年前, 最后更新于 9个月前 版本号 #3 171702 v ...
最新文章
- 独家 | 对抗图像和攻击在Keras和TensorFlow上的实现
- 《PostgreSQL 9.0性能调校》一一第1章 PostgreSQL版本
- doAcquireSharedInterruptibly
- 给thinkphp加个分页样式
- 使用rman本机复制新数据库
- power bi 创建空表_使用Power BI创建足球热图
- iOS 去除字符串中的H5标签。
- Banner加载轮播图
- uWSGI和Gunicorn
- SpringCloud之服务提供者和服务消费者
- Sencha Cmd包
- 流数据分析之地理围栏应用
- 操作系统文件存储空间管理(存储空间的划分与初始化)
- clearcase使用小结
- (按位取反)运算的理解
- java odbc 实现access连接并导出mdb格式文件
- 一些觉得不错的国外Mooc课程
- Cadence Virtuoso、Calibre、Altium Designer、HFSS 等 EDA 软件。
- 云服务器挂软件用哪个系统,云服务器挂软件用什么系统
- 数据结构与算法:链表