多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
> 原文出处:http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html **介绍:** 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功能的插件](https://github.com/madcapnmckay/Knockout-UI)来实现autoComplete功能: ~~~ <input type="text" data-bind="autocomplete : autocompleteConfig"/> ~~~ 而没必要每次都要声明下面这样的代码: ~~~ $( "#inputId" ).autocomplete({ source: availableTags }); ~~~ 或者如果你想用表单验证功能,你可以使用[验证插件](https://github.com/ericmbarnard/Knockout-Validation): ~~~ var myObj = ko.observable('').extend({ max: 99 }); ~~~ 或者 ~~~ <input type="text" data-bind="value: myProp" max="99"/> ~~~ 而不是每次在点击提交按钮的时候或者离开焦点的时候都去检查。 **结论:** 使用Knockout将极大减少JavaScript的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。 赶紧开始你的快速学习征程吧!