TA的每日心情 | 开心 2021-12-13 21:45 |
---|
签到天数: 15 天 [LV.4]偶尔看看III
|
使用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的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。
赶紧开始你的快速学习征程吧! |
|