http://learn.knockoutjs.com/  所有示例和代码都在在上面直接运行预览

注意:因为它用了google的cdn加速,所要要用代_理+_翻_墙才能正常加载

使用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

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

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

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

Knockout应用开发指南(完整版) 目录索引的更多相关文章

  1. Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

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

    使用Knockout有一段时间了(确切的说从MIX11大会宣传该JavaScript类库以来,我们就在使用,目前已经在正式的asp.net MVC项目中使用),Knockout使用js代码达到双向绑定 ...

  3. Knockout应用开发指南

    Knockout应用开发指南 第一章:入门 2011-11-21 14:20 by 汤姆大叔, 20799 阅读, 17 评论, 收藏, 编辑 1    Knockout简介 (Introductio ...

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

    原文:Knockout应用开发指南 第八章:简单应用举例(2) 5   Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...

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

    原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...

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

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

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

    原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...

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

    原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...

  9. Hadoop权威指南(中文版-带目录索引)pdf电子书

      Hadoop权威指南(中文版-带目录索引)pdf电子书下载地址:百度网盘点击下载:链接:https://pan.baidu.com/s/1E-8eLaaqTCkKESNPDqq0jw 提取码:g6 ...

随机推荐

  1. C++的虚函数表

    这里的例子全部来自陈皓的C++ 虚函数表解析,经过修改的. 编译器:g++ (Ubuntu 4.9.2-10ubuntu13) 4.9.2 环境:ubuntu 15.04  64位系统(地址占8字节) ...

  2. WinEdt和TeXworks编辑LaTeX文件乱码问题

    WinEdt默认使用的是系统编码,windows下可以认为是 GBK编码,而TeXworks默认使用的是UTF8编码,所以要统一这两个编码,才能保证两个文件互相打开不会乱码. 具体方法如下: 一,可以 ...

  3. Think Python - Chapter 10 - Lists

    10.1 A list is a sequenceLike a string, a list is a sequence of values. In a string, the values are ...

  4. Java 正则表达式学习总结和一些小例子

    从Java1.4起,Java核心API就引入了java.util.regex程序包,它是一种有价值的基础工具,可以用于很多类型的文本处理, 如匹配,搜索,提取和分析结构化内容. java.util.r ...

  5. HDU 4599 概率DP

    先推出F(n)的公式: 设dp[i]为已经投出连续i个相同的点数平均还要都多少次才能到达目标状态. 则有递推式dp[i] = 1/6*(1+dp[i+1]) + 5/6*(1+dp[1]).考虑当前这 ...

  6. php部分--数组(包含指针思想遍历数组);

    1.创建并输出数组 (1)相同数据类型的数组$attr=array(1,2,3,4,5); print_r($attr); echo "<br>"; $sttr1=ar ...

  7. HDU 1507 Uncle Tom's Inherited Land*(二分图匹配)

    Uncle Tom's Inherited Land* Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  8. POJ-2991 Crane(区间更新+向量旋转)

    题目大意:n个向量首尾相连,每次操作使某个区间中的所有向量都旋转同样的角度.每次操作后都回答最后一个向量的坐标. 题目分析:区间维护向量信息.向量旋转:x1=x0*cos(t)-y0*sin(t),y ...

  9. 黑马程序员——JAVA基础之函数,重载,内存结构

      ------- android培训.java培训.期待与您交流! ---------- 函数: 什么是函数? • 函数就是定义在类中的具有特定功能的一段独立小程序. • 函数也称为方法. 函数的格 ...

  10. OSPF

    Ospf OSPF(开放最短路径优先协议)是一种无类内部网关协议(IGP):是一种链路状态路由选择协议: 入门: 可以把整个网络(一个自治系统AS)看成一个王国,这个王国可以分成几个 区(area), ...