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. SQL语句建表、设置主键、外键、check、default、unique约束

    · 什么是数据库? 存放数据的仓库. · 数据库和数据结构有什么区别? 数据结构要解决在内存中操作数据的问题,数据库要解决在硬盘中操作数据的问题.数据结构研究一些抽象数据模型(ADT)和以及定义在该模 ...

  2. latex 小结

    1 no file .bbl http://blog.csdn.net/zhedasuiyuan/article/details/9223637 另外,你可能有多个 .bbl.目前的做法是,在控制台上 ...

  3. ui-bootstrap-tpls-0.11.0.min.js

  4. Java 简介

    前言 本文大致介绍 Java 语言 什么是 Java 语言? Java 不仅仅是一门语言,Java 是一个完整的平台,有一个庞大的库,其中包含很多可重用的代码和一个提供诸如安全性,跨操作系统的可移植性 ...

  5. UI学习笔记---第十四天数据持久化

    一.沙盒机制 每个应用程序位于文件系统的严格限制部分 每个应用程序只能在为该程序创建的文件系统中读取文件 每个应用程序在iOS系统内斗放在了统一的文件夹目录下 沙盘路径的位置 1. 通过Finder查 ...

  6. Junit单元测试细节

    1.中心思想: 单元测试不是证明你对,而是证明你没错 2.基本注解应用 注解 使用环境 @Test 标志这个方法需要单元测试 @BeforeClass 在所有单元测试方法前执行 ps:需要是stati ...

  7. SpringMVC4零配置--Web上下文配置【MvcConfig】

    与SpringSecurity的配置类似,spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明. ...

  8. 转：SQL:外连接on条件与where条件的区别

    原文地址:http://hi.baidu.com/benben1006/blog/item/187deb77bc0e5319b151b974.html 数据库在通过连接两张或多张表来返回记录时,都会生 ...

  9. Unable to get valid context for root

    登陆时报以下错误Unable to get valid context for rootLast login: Wed Jul 24 02:06:01 2013 from 10.64.41.3 单机模 ...

  10. P168 实战练习（权限修饰符）

    创建Game类,运行代码如下: package org.hanqi.pn0120; public class Game { private String name; private String ca ...