前言
最后更新于：2022-04-01 05:02:36
> 原文出处：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的开发量，是需要使用简单的绑定语法就可以很快速地应用到你的站点上。
赶紧开始你的快速学习征程吧！