Knockout应用开发指南(完整版) 目录索引
2023-09-14 08:58:57 时间
使用Knockout有一段时间了(确切的说从MIX11大会宣传该JavaScript类库以来,我们就在使用,目前已经在正式的asp.net MVC项目中使用),Knockout使用js代码达到双向绑定的目的,类似Silverlight/WPF里的绑定一样,我们主要就是利用相关的特性进行开发的,极大地减少了代码开发量。
关于该系列文章:
本系列文章共份10个章节(13篇),主要是翻译官方站点教程文章,然后加了一些自己的理解。有任何技术点不明白或者需要讨论的,欢迎大家留言拍砖。
目录:
Knockout应用开发指南 第二章:监控属性(Observables)
Knockout应用开发指南 第六章:加载或保存JSON数据
更多例子:
用Javascript评估用户输入密码的强度(Knockout版)
介绍:
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥,先请看一下微软MIX11大会上的一段视频
连接地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08
或者直接运行下面的代码看看效果:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!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的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。
赶紧开始你的快速学习征程吧!
相关文章
- 亿级京东应用架构设计与治理
- 正则表达式技巧: 开发中的应用与实践
- 【Android应用开发】 推送原理解析 极光推送使用详解 (零基础精通推送)
- 电子书丨《OpenResty完全开发指南:构建百万级别并发的Web应用》
- 拓展Oracle包开发,助力数据库应用(oracle包开发)
- 使用JSPMySQL实现Web应用程序开发(jspmysql开发)
- 应用开发Linux服务器搭建指南:轻松实现桌面应用开发(linux服务器桌面)
- 8191 Linux驱动:简洁而高效的应用(8191linux驱动)
- 使用Oracle ADF框架来推动快速低成本应用开发(oracleadf框架)
- Linux内核:开发与应用指南(linux内核书籍推荐)
- 及应用Oracle 原理及其实践:管理、开发与部署(oracle原理)
- 在优麒麟上使用 Electron 开发桌面应用
- 【交易技术前沿】访存延迟对微秒级应用开发的影响 / 毛银杰
- 探究linux平台下的JRE7:开发与应用的全方位指南(linuxjre7)
- 利用Redis开发极致性能的应用(redis利用)
- 利用MSSQL空间数据类型加快GIS应用开发(mssql空间数据类型)
- Tcl在Linux下的应用:一次有效的探索(tcllinux软件)
- oracle中表链接的应用及实践(oracle中表链接方式)
- php代码中使用换行及(n或rn和br)的应用