Knockout.js隨手記(1)

時間 2019-11-11

標籤 knockout.js knockout 隨手欄目 JavaScript 简体版

原文原文鏈接

新的開始，knockout.js

1.首先去http://knockoutjs.com/index.html下載knockout.js，最新的版本是2.3javascript

2.知道什麼是Knockout？它是個JavaScript library，幫助建立豐富的顯示和編輯器UI，經過乾淨的底層數據模型。你能夠在任什麼時候候動態更新UI的選擇部分。html

3.知道knockoutjs的實現原理[MVVM模式]java

MVVM的優勢

MVVM已在微軟WPF/Silverlight/WP7中普遍應用，和MVC模式同樣，主要目的是分離視圖（View）和模型（Model），有幾大優勢web

1. 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

2. 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。

3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。

4. 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

簡單的說，在MVVM裏，UI操做涉及的數據被包裝成ViewModel，接着在UI輸入/顯示元素分別標註其對應到ViewModel某個屬性值。當程式碼改變ViewModel屬性值，其對應的輸入/顯示欄位元素便會自動更新；而在UI欄位填入不一樣內容，ViewModel的資料屬性也會馬上被修改成新值。這種雙向綁定(Two-Way Binding)的概念，若使用傳統作法得在ViewModel的屬性修改事件將新值反映到某個顯示/輸入元素上，還得攔截輸入元素的onChange事件，用程式將最新輸入結果反應到ViewMode屬性上，瑣碎的實作細節蠻多的。而不論是Silverlight/WPF或JavaScript，MVVM程式庫的目標即在節省前述自行開發的工夫，只需在顯示/輸入元素上註明其對應的ViewModel屬性，以後所有交給knockout.js庫自動處理，讓程式開發者能優雅地實現MVVM。瀏覽器

knockout.js的主要特點爲：

聲明式語法：透過DOM元素屬性宣告完成數據綁定，簡潔方便
自動UI更新：只要產品型號資料改變，UI當即反映
依賴性追蹤：源頭數據變更時，可自動追溯全部關連的數據一塊兒改變
支持模板：開放自訂模板決定數據輸出結果，可知足自定義需求
免費，開源純JavaScript的 - 可跟jQuery的或其餘JavaScript框架兼容，縮小的版本只有40KB，HTTP壓縮後只有14KB跨瀏覽器！支持IE6+, FF2, Chrome, Opera, Safariapp

官方網站提供了友好的互動式的在線入門教程，能夠去http://learn.knockoutjs.com/練習以及查看詳細的API文檔。框架

開始使用Knockout.js

　　有時候若是你沒有使用代理去訪問官網或者相關網站的時候，可能打不開等等，那麼最容易得到knockout.js的方式就是使用管理NuGet程序包工具進行自動安裝編輯器

引入konckout.js包後，咱們接着寫幾行代碼就能夠嘗試下MVVM的優秀特性ide

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>konckout學習系列</title>
    <script src="Scripts/knockout-2.3.0.debug.js"></script>
</head>
<body>
    輸入值：<input type="text" id="txtValue" data-bind="value: myValue" /><br/>
    響應文本：<span id="spnValue" data-bind="text: myValue"></span>
    <script type="text/javascript">
        var myViewModel =
        {
            myValue: ko.observable("Halower")
        }
        ko.applyBindings(myViewModel);
    </script>
</body>
</html>

能夠看到，咱們幾乎都沒寫什麼，完成了自動的感應和數據的綁定。工具

1.只定義了一個 myViewModel組件對象（包含一個myValue的屬性）。

2.經過data-bind="value: myValue"將myValue屬性綁到<input>的value值。

3.經過data-bind="text: myValue"將屬性值動態的反映到<span>中。

因爲本例未引用jQuery，無$.ready()可用，因此把<script>放在網頁的最後以確保在網頁元素都載入後才執行ko.applyBindings( )。

試着改變<input>的值，可發現<span>會立刻反應修改後的結果，能夠看出已經自動的檢測了onchange時間了，果真很強悍！

微軟在往後的VS版本中，只要是好的，免費的，開源的，都會集成進來替他賣力，並且從MVC4中開始提出了SPA的概念，也就是說knockout.js不就就會成爲微軟的得力幫手。

PS：ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.

備註：

本文版權歸你們共用，不歸本人全部，全部知識都來自於官網支持，書本，國內外論壇，大牛分享等等......後續將學習knockout.js的經常使用功能。

相關標籤/搜索

每日一句

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