加载中...

前言


介绍:

Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥,先请看一下微软MIX11大会上的一段视频,连接地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08

或者直接运行下面的代码看看效果:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
  5. <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
  6. <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
  7. </head>
  8. <body>
  9. Choose a ticket class:
  10. <select data-bind="options: tickets,
  11. optionsCaption: 'Choose...',
  12. optionsText: 'name',
  13. value: chosenTicket">
  14. </select>
  15. </p>
  16. <p data-bind="template: 'ticketTemplate'">
  17. </p>
  18. <script id="ticketTemplate" type="text/x-jquery-tmpl">
  19. {{if chosenTicket}}
  20. You have chosen <b>${ chosenTicket().name }</b>
  21. ($${ chosenTicket().price })
  22. <button data-bind="click: resetTicket">Clear</button>
  23. {{/if}}
  24. </script>
  25. <script type="text/javascript">
  26. var viewModel = {
  27. tickets: [
  28. { name: "Economy", price: 199.95 },
  29. { name: "Business", price: 449.22 },
  30. { name: "First Class", price: 1199.99 }
  31. ],
  32. chosenTicket: ko.observable(),
  33. resetTicket: function () { this.chosenTicket(null) }
  34. };
  35. ko.applyBindings(viewModel);
  36. </script>
  37. </body>
  38. </html>

插件:
Knockout也有丰富的插件可以使用,例如:

你可以使用集成JQueryUI功能的插件来实现autoComplete功能:

  1. <input type="text" data-bind="autocomplete : autocompleteConfig"/>

而没必要每次都要声明下面这样的代码:

  1. $( "#inputId" ).autocomplete({
  2. source: availableTags
  3. });

或者如果你想用表单验证功能,你可以使用验证插件:

  1. var myObj = ko.observable('').extend({ max: 99 });

或者

  1. <input type="text" data-bind="value: myProp" max="99"/>

而不是每次在点击提交按钮的时候或者离开焦点的时候都去检查。

结论:

使用Knockout将极大减少JavaScript的开发量,是需要使用简单的绑定语法就可以很快速地应用到你的站点上。

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

原文出处:http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html


还没有评论.