Knockout應用開發指南（完整版）目錄索引

時間 2019-11-17

標籤 knockout 應用開發指南完整目錄索引简体版

原文原文鏈接

http://learn.knockoutjs.com/ 全部示例和代碼都在在上面直接運行預覽javascript

注意：由於它用了google的cdn加速，所要要用代_理+_翻_牆才能正常加載html

使用Knockout有一段時間了（確切的說從MIX11大會宣傳該JavaScript類庫以來，咱們就在使用，目前已經在正式的asp.net MVC項目中使用），Knockout使用js代碼達到雙向綁定的目的，相似Silverlight/WPF裏的綁定同樣，咱們主要就是利用相關的特性進行開發的，極大地減小了代碼開發量。前端

關於該系列文章：
本系列文章共份10個章節（13篇），主要是翻譯官方站點教程文章，而後加了一些本身的理解。有任何技術點不明白或者須要討論的，歡迎你們留言拍磚。java

目錄：jquery

Knockout應用開發指南第一章：入門git

Knockout應用開發指南第二章：監控屬性(Observables)github

Knockout應用開發指南第三章：綁定語法（1）app

Knockout應用開發指南第三章：綁定語法（2）asp.net

Knockout應用開發指南第三章：綁定語法（3）學習

Knockout應用開發指南第四章：模板綁定

Knockout應用開發指南第五章：建立自定義綁定

Knockout應用開發指南第六章：加載或保存JSON數據

Knockout應用開發指南第七章：Mapping插件

Knockout應用開發指南第八章：簡單應用舉例（1）

Knockout應用開發指南第八章：簡單應用舉例（2）

Knockout應用開發指南第九章：高級應用舉例

Knockout應用開發指南第十章：更多信息

更多例子：

用Javascript評估用戶輸入密碼的強度（Knockout版）

介紹：

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功能的插件來實現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的開發量，是須要使用簡單的綁定語法就能夠很快速地應用到你的站點上。

趕忙開始你的快速學習征程吧！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Knockout應用開發指南（完整版） 目錄索引

Knockout應用開發指南（完整版）目錄索引