Knockout應用開發指南（完整版） 目錄索引
2011-11-21 14:24 湯姆大叔 閱讀(209659) 評論(47) 收藏 舉報
使用Knockout有一段時間了（確切的說從MIX11大會宣傳該JavaScript類庫以來，我們就在使用，目前已經在正式的asp.net MVC項目中使用），Knockout使用js代碼達到雙向綁定的目的，類似Silverlight/WPF里的綁定一樣，我們主要就是利用相關的特性進行開發的，極大地減少了代碼開發量。
使用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
或者直接運行下面的代碼看看效果：
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的開發量，是需要使用簡單的綁定語法就可以很快速地應用到你的站點上。
趕緊開始你的快速學習征程吧！
浙公網安備 33010602011771號