Knockout应用开发指南(完整版) 目录索引

简介: 原文:Knockout应用开发指南(完整版) 目录索引使用Knockout有一段时间了(确切的说从MIX11大会宣传该JavaScript类库以来,我们就在使用,目前已经在正式的asp.net MVC项目中使用),Knockout使用js代码达到双向绑定的目的,类似Silverlight/WPF里的绑定一样,我们主要就是利用相关的特性进行开发的,极大地减少了代码开发量。
原文: Knockout应用开发指南(完整版) 目录索引

使用Knockout有一段时间了(确切的说从MIX11大会宣传该JavaScript类库以来,我们就在使用,目前已经在正式的asp.net MVC项目中使用),Knockout使用js代码达到双向绑定的目的,类似Silverlight/WPF里的绑定一样,我们主要就是利用相关的特性进行开发的,极大地减少了代码开发量。

 

关于该系列文章:
本系列文章共份10个章节(13篇),主要是翻译官方站点教程文章,然后加了一些自己的理解。有任何技术点不明白或者需要讨论的,欢迎大家留言拍砖。

目录:

Knockout应用开发指南 第一章:入门

Knockout应用开发指南 第二章:监控属性(Observables)

Knockout应用开发指南 第三章:绑定语法(1)

Knockout应用开发指南 第三章:绑定语法(2)

Knockout应用开发指南 第三章:绑定语法(3)

Knockout应用开发指南 第四章:模板绑定

Knockout应用开发指南 第五章:创建自定义绑定

Knockout应用开发指南 第六章:加载或保存JSON数据

Knockout应用开发指南 第七章:Mapping插件

Knockout应用开发指南 第八章:简单应用举例(1

Knockout应用开发指南 第八章:简单应用举例(2)

Knockout应用开发指南 第九章:高级应用举例

Knockout应用开发指南 第十章:更多信息

更多例子:

用Javascript评估用户输入密码的强度(Knockout版


介绍:

Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥,先请看一下微软MIX11大会上的一段视频

连接地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08

或者直接运行下面的代码看看效果:

View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
</head>
<body>
Choose a ticket class:
<select data-bind="options: tickets,
optionsCaption: 'Choose...',
optionsText: 'name',
value: chosenTicket"
>
</select>
</p>
<p data-bind="template: 'ticketTemplate'">
</p>
<script id="ticketTemplate" type="text/x-jquery-tmpl">
{{
if chosenTicket}}
You have chosen
<b>${ chosenTicket().name }</b>
($${ chosenTicket().price })
<button data-bind="click: resetTicket">Clear</button>
{{/if}}
</script>
<script type="text/javascript">
var viewModel = {
tickets: [
{ name:
"Economy", price: 199.95 },
{ name:
"Business", price: 449.22 },
{ name:
"First Class", price: 1199.99 }
],
chosenTicket: ko.observable(),
resetTicket:
function () { this.chosenTicket(null) }
};
ko.applyBindings(viewModel);
</script>
</body>
</html>

 

插件:
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的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。

赶紧开始你的快速学习征程吧!

目录
相关文章
|
域名解析 负载均衡 监控
阿里云DNS常见问题之使用DNS实现负载均衡失败如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
|
NoSQL 安全 Linux
Redis 字符串:SDS
Redis 字符串:SDS
170 0
|
Java Maven
启动SpringBoot 错误: 找不到或无法加载主类 com.xx.xxApplication
1、在项目名称上右击–Reload from disk 2、清理项目里面的class文件进行重新编译, 鼠标点击右侧Maven,找到项目名称,然后点击Lifecycle中的clean/compile/install
2766 1
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
选中项目,点击右上角的显示全部文件按钮,会将默认隐藏的文件显示出来,选中所需图片,右键,添加到项目,然后选择图片查看属性,生成操作选择resource。完毕。本人目前的解决方案。
1010 41
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
|
机器学习/深度学习 供应链 TensorFlow
使用Python实现深度学习模型:智能物流与供应链管理
【8月更文挑战第1天】 使用Python实现深度学习模型:智能物流与供应链管理
592 2
使用Python实现深度学习模型:智能物流与供应链管理
|
小程序 Java 数据库
8套三级医院应用的管理系统源码,直接上项目,HIS、LIS、PACS
8套应用于二级医院、三级医院医院管理系统源码,均有自主知识产权,应用案例,系统稳定运行中。
1410 1
8套三级医院应用的管理系统源码,直接上项目,HIS、LIS、PACS
|
机器学习/深度学习 算法 数据可视化
【机器学习实战】10分钟学会Python怎么用LR线性回归进行预测(十)
【机器学习实战】10分钟学会Python怎么用LR线性回归进行预测(十)
453 0
|
存储 定位技术 Python
Python中ArcPy实现对不同时相的栅格遥感影像依据其成像时间分别批量拼接
Python中ArcPy实现对不同时相的栅格遥感影像依据其成像时间分别批量拼接
140 1
|
数据采集 前端开发 关系型数据库
修剪字符串:深入了解MySQL中的TRIM()函数
在数据库操作中,去除字符串首尾的空格或特定字符是常见的需求,这时可以使用MySQL中的TRIM()函数。本文将深入探讨TRIM()函数的用法、示例以及在数据库操作中的应用。
1605 0
|
NoSQL Java 应用服务中间件
OpenSource - SCM服务管理平台
OpenSource - SCM服务管理平台
332 0