Knockout.js隨手記(1)


新的開始,knockout.js

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

2.知道什么是Knockout?它是個JavaScript library,幫助創建豐富的顯示和編輯器UI,通過干凈的底層數據模型。你可以在任何時候動態更新UI的選擇部分。

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

image

 

MVVM的優點

MVVM已在微軟WPF/Silverlight/WP7中廣泛應用,和MVC模式一樣,主要目的是分離視圖(View)和模型(Model),有幾大優點

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, Safari

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

 

開始使用Knockout.js

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

引入konckout.js包后,我們接着寫幾行代碼就可以嘗試下MVVM的優秀特性

<!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的常用功能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM