Knockout应用开发指南
Knockout应用开发指南 第一章:入门
2011-11-21 14:20 by 汤姆大叔, 20799 阅读, 17 评论, 收藏, 编辑
1 Knockout简介 (Introduction)
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
Knockout有如下4大重要概念:
- 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
- UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
- 依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
- 模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
简称:KO
2 入门介绍 (Getting started)
2.1 KO工作原理及带来的好处
Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。
重要特性:
- 优雅的依赖追踪- 不管任何时候你的数据模型更新,都会自动更新相应的内容。
- 声明式绑定- 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。
- 灵活全面的模板- 使用嵌套模板可以构建复杂的动态界面。
- 轻易可扩展- 几行代码就可以实现自定义行为作为新的声明式绑定。
额外的好处:
- 纯JavaScript类库 – 兼容任何服务器端和客户端技术
- 可添加到Web程序最上部 – 不需要大的架构改变
- 简洁的 – Gzip之前大约25kb
- 兼容任何主流浏览器 (IE 6+、Firefox 2+、Chrome、Safari、其它)
- Comprehensive suite of specifications (采用行为驱动开发) - 意味着在新的浏览器和平台上可以很容易通过验证。
开发人员如果用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。如果熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说,你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么
OK, 如何使用它?
简单来说:声明你的数据作为一个JavaScript 模型对象(model object),然后将DOM 元素或者模板(templates)绑定到它上面.
让我们来看一个例子
想想在一个页面上,航空旅客可以为他们的旅行升级高级食物套餐,当他们选择一个套餐的时候,页面立即显示套餐的描述和价格。首先,声明可用的套餐:
var availableMeals = [
{ mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
{ mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
{ mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
];
如果想让这3个选项显示到页面上,我们可以绑定一个下拉菜单(例如:<select>元素)到这个数据上。例如:
<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal: <select data-bind="options: availableMeals,
optionsText: 'mealName'"></select>
启用Knockout并使你的绑定生效,在availableMeals变量声明之后添加如下代码:
var viewModel = {
/* we'll populate this in a moment */
}; ko.applyBindings(viewModel); // Makes Knockout get to work
// 注意:ko. applyBindings需要在上述HTML之后应用才有效
你可以在这个系列里将学习更多的view model 和 MVVM。现在你的页面将render成如下的样子:
响应选择
下一步,声明一个简单的data model来描述旅客已经选择的套餐,添加一个属性到当前的view model上:
var viewModel = {
chosenMeal: ko.observable(availableMeals[0])
};
ko.observable是什么?它是KO里的一个基础概念。UI可以监控(observe)它的值并且回应它的变化。这里我们设置chosenMeal是UI可以监控已经选择的套餐,并初始化它,使用availableMeal里的第一个值作为它的默认值(例如:Standard)。
让我们将chosenMeal 关联到下拉菜单上,仅仅是更新<select>的data-bind属性,告诉它让<select>元素的值读取/写入chosenMeal这个模型属性:
Chosen meal: <select data-bind="options: availableMeals,
optionsText: 'mealName',
value: chosenMeal"></select>
理论上说,我们现在可以读/写chosenMeal 属性了,但是我们不知道它的作用。让我们来显示已选择套餐的描述和价格:
<p>
You've chosen:
<b data-bind="text: chosenMeal().description"></b>
(price: <span data-bind='text: chosenMeal().extraCost'></span>)
</p>
于是,套餐信息和价格,将根据用户选择不同的套餐项而自动更新:
更多关于observables和dependency tracking的使用
最后一件事:如果能将价格格式化成带有货币符号的就好了,声明一个JavaScript函数就可以实现了…
function formatPrice(price) {
return price == 0 ? "Free" : "$" + price.toFixed(2);
}
… 然后更新绑定信息使用这个函数 …
(price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)
… 界面显示结果将变得好看多了:
Price的格式化展示了,你可以在你的绑定里写任何JavaScript代码,KO仍然能探测到你的绑定依赖代码。这就展示了当你的model改变时,KO如何只进行局部更新而不用重新render整个页面 – 仅仅是有依赖值改变的那部分。
链式的observables也是支持的(例如:总价依赖于价格和数量)。当链改变的时候,依赖的下游部分将会重新执行,同时所有相关的UI将自动更新。不需要在各个observables之间声明关联关系,KO框架会在运行时自动执行的。
你可以从 observables 和 observable arrays 获取更多信息。上面的例子非常简单,没有覆盖很多KO的功能。你可以获取更多的内嵌的绑定和模板绑定。
KO和jQuery (或Prototype等)是竞争关系还是能一起使用?
所有人都喜欢jQuery! 它是一个在页面里操作元素和事件的框架,非常出色并且易使用,在DOM操作上肯定使用jQuery,KO解决不同的问题。
如果页面要求复杂,仅仅使用jQuery需要花费更多的代码。 例如:一个表格里显示一个列表,然后统计列表的数量,Add按钮在数据行TR小于5调的时候启用,否则就禁用。jQuery 没有基本的数据模型的概念,所以需要获取数据的数量(从table/div或者专门定义的CSS class),如果需要在某些SPAN里显示数据的数量,当添加新数据的时候,你还要记得更新这个SPAN的text。当然,你还要判断当总数>=5条的时候禁用Add按钮。 然后,如果还要实现Delete功能的时候,你不得不指出哪一个DOM元素被点击以后需要改变。
Knockout的实现有何不同?
使用KO非常简单。将你的数据描绘成一个JavaScript数组对象myItems,然后使用模板(template)转化这个数组到表格里(或者一组DIV)。不管什么时候数组改变, UI界面也会响应改变(不用指出如何插入新行<tr>或在哪里插入),剩余的工作就是同步了。例如:你可以声明绑定如下一个SPAN显示数据数量(可以放在页面的任何地方,不一定非要在template里):
There are <span data-bind="text: myItems().count"></span> items
就是这些!你不需要写代码去更新它,它的更新依赖于数组myItems的改变。同样, Add按钮的启用和禁用依赖于数组myItems的长度,如下:
<button data-bind="enable: myItems().count < 5">Add</button>
之后,如果你要实现Delete功能,不必指出如何操作UI元素,只需要修改数据模型就可以了。
总结:KO没有和jQuery或类似的DOM 操作API对抗竞争。KO提供了一个关联数据模型和用户界面的高级功能。KO本身不依赖jQuery,但是你可以一起同时使用jQuery, 生动平缓的UI改变需要真正使用jQuery。
2.2 下载安装
Knockout的核心类库是纯JavaScript代码,不依赖任何第三方的类库。所以按照如下步骤即可添加KO到你的项目里:
- 下载Knockout类库的最新版本,在正式开发和产品使用中,请使用默认的压缩版本(knockout-x.x.js)。
下载地址:https://github.com/SteveSanderson/knockout/downloads
Debug调试目的,可使用非压缩版本(knockout-x.x.debug.js
). 和压缩版本同样的功能,但是具有全变量名和注释的可读性源代码,并且没有隐藏内部的API。
- 在你的HTML页面里使用<script>标签引用Knockout类库文件。
这就是你需要的一切…
开启模板绑定
…除非你想使用模板绑定功能(您很有可能使用它,因为非常有用),那你需要再引用两个JavaScript文件。 KO1.3版的默认模板引擎是依赖jQuery
的jquery.tmpl.js
(最新版2.0版已经不依赖jquery tmp了)。所以你需要下载下面的2个文件并在引用KO之前引用:
- jQuery 1.4.2 或更高版本
jquery-tmpl.js
— 此版本 可以很容易使用,或者你访问官方网站 查找最新版本。
正确的引用顺序:
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery-tmpl.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>
(当然,您要根据你的文件路径累更新上面的文件路径和文件名。)
下一步,开始学习 监控属性。
Knockout应用开发指南(完整版) 目录索引
2011-11-21 14:24 by 汤姆大叔, 46916 阅读, 35 评论, 收藏, 编辑
使用Knockout有一段时间了(确切的说从MIX11大会宣传该JavaScript类库以来,我们就在使用,目前已经在正式的asp.net MVC项目中使用),Knockout使用js代码达到双向绑定的目的,类似Silverlight/WPF里的绑定一样,我们主要就是利用相关的特性进行开发的,极大地减少了代码开发量。
关于该系列文章:
本系列文章共份10个章节(13篇),主要是翻译官方站点教程文章,然后加了一些自己的理解。有任何技术点不明白或者需要讨论的,欢迎大家留言拍砖。
目录:
Knockout应用开发指南 第二章:监控属性(Observables)
Knockout应用开发指南 第六章:加载或保存JSON数据
更多例子:
用Javascript评估用户输入密码的强度(Knockout版)
介绍:
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥,先请看一下微软MIX11大会上的一段视频
连接地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08
或者直接运行下面的代码看看效果:
插件:
Knockout也有丰富的插件可以使用,例如:
你可以使用集成JQueryUI功能的插件来实现autoComplete功能:
<input type="text" data-bind="autocomplete : autocompleteConfig"/>
而没必要每次都要声明下面这样的代码:
$( "#inputId" ).autocomplete({
source: availableTags
});
或者如果你想用表单验证功能,你可以使用验证插件:
var myObj = ko.observable('').extend({ max: 99 });
或者
<input type="text" data-bind="value: myProp" max="99"/>
而不是每次在点击提交按钮的时候或者离开焦点的时候都去检查。
结论:
使用Knockout将极大减少JavaScript的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。
赶紧开始你的快速学习征程吧!
Knockout应用开发指南的更多相关文章
- Knockout应用开发指南(完整版) 目录索引
http://learn.knockoutjs.com/ 所有示例和代码都在在上面直接运行预览 注意:因为它用了google的cdn加速,所要要用代_理+_翻_墙才能正常加载 使用Knockout有 ...
- Knockout应用开发指南 第十章:更多信息(完结篇)
原文:Knockout应用开发指南 第十章:更多信息(完结篇) 1 浏览器支持 Knockout在如下浏览器通过测试: Mozilla Firefox 2.0+(最新测试版本:3.6.8) Goo ...
- Knockout应用开发指南 第九章:高级应用举例
原文:Knockout应用开发指南 第九章:高级应用举例 1 Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...
- Knockout应用开发指南 第八章:简单应用举例(2)
原文:Knockout应用开发指南 第八章:简单应用举例(2) 5 Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...
- Knockout应用开发指南 第八章:简单应用举例(1)
原文:Knockout应用开发指南 第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用Kncokout的快感. 1 Hello world ...
- Knockout应用开发指南 第七章:Mapping插件
原文:Knockout应用开发指南 第七章:Mapping插件 Mapping插件 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些 ...
- Knockout应用开发指南 第六章:加载或保存JSON数据
原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
- Knockout应用开发指南 第四章:模板绑定
原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...
- Knockout应用开发指南 第五章:创建自定义绑定
原文:Knockout应用开发指南 第五章:创建自定义绑定 创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定 ...
- Knockout应用开发指南 第三章:绑定语法(3)
原文:Knockout应用开发指南 第三章:绑定语法(3) 12 value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...
随机推荐
- Android4.0(Phone)来电过程分析
在开机时.系统会启动PhoneApp类,那是由于在AndroidManifest.xml文件里配置了 <application android:name="PhoneApp" ...
- C++11于once_flag,call_once分析的实现
基于该分析llvm的libc++,代替gun的libstdc++,由于libstdc++的代码里太多宏了,看起来蛋疼. 在多线程编程中,有一个常见的情景是某个任务仅仅须要运行一次.在C++11中提供了 ...
- sql语句like的使用方法
在SQL结构化查询语言中,LIKE语句有着至关关键的数据. LIKE语句的语法格式是:select * from 表名 where 字段名 like 相应值(子串),它主要是针对字符型字段的,它的作用 ...
- 【MongoDB】在windows平台mongodb切片集群(三)
在过去的两年我们博客详细阐述了零碎工作集群和打造过程.在这篇博客中,我们主要分析测试结果一起支离破碎集群. 首先来看看碎片集群的每个状态.你可以看出来复制集A和B都是正常的: 一.开启分片集合 开启一 ...
- Unity3D移动端内存优化(NGUI方面)
Unity3D引擎技术交流QQ群:[21568554] 做3d移动端内存一直是人们头疼的问题,载入的资源释放了,还有其它的须要释放.比方ngui释放,事实上主要是NGUI的Texture和Spr ...
- 使用C++实现功能下载文件
今天问一个同学C++实现的下载链接下载并保存给定的文件,互联网搜索.看到这样的事情在网上.因此,改变下直接带来,因为他的代码是在VC++,我导入到VS2010中出现点小问题.所以改了下贴了个VS中亲測 ...
- linux(fedora) 下dvwa 建筑环境
linux(fedora)下dvwa组态 1.下载httpd,dvwa,mysql,mysqlserver, php-mysql,php 除了dvwa 这是外界进入下一官方网站.该服务通过休息inst ...
- mysql导出和导入命令更改数据库名称数据库
概要 mysql 数据库导入和导出,有两种方法 1)从试点SQL脚本.导入(导入导出又分两种:1. 命令. 2. 工具.这里我们仅仅介绍命令). 2)直接拷贝数据库文件(此方法不推荐). 一.mysq ...
- C++ Web Programming
一般的网关接口或者CGI,就是一个标准的集合.它定义信息怎样再问吧server和一般脚本间的交换. CGI的说明书是由NCSA维护,NCSA定义CGI的范畴:一般的网关接口或者CGI是外部网关程序的一 ...
- CocoaPods停在Analyzing dependencies解决方案
现在很多开源项目应用cocoapod.这使集成第三方库都非常方便,在没有花project里设置哪些参数.仗着. 只要运行pod update要么pod install时间,经常会卡在Analyzing ...