Knockout应用开发指南持续更新中

最新推荐文章于 2019-09-10 08:34:33 发布

iteye_9378

最新推荐文章于 2019-09-10 08:34:33 发布

阅读量63

点赞数

文章标签： ui 前端测试 ViewUI

本文档详细介绍了Knockout.js的应用开发，包括监控属性、绑定语法等核心概念，并提供了丰富的实例，展示了如何通过MVVM模式简化前端开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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应用开发指南第十章：更多信息

更多例子

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

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