knockout.js!!

如果說jQuery是林志玲,那麼knockout.js可比陳妍希,同樣讓人一見傾心!! 這就是我初見knockout.js的感想。

knockout.js是一套JavaScript UI程式庫,主要用來在網頁實現MVVM設計模式。MVVM已在微軟WPF/Silverlight/WP7中廣泛應用(延伸閱讀: InfoQ的簡要介紹、微軟的MVVM導論天空的垃圾場則有幾篇WPF MVVM入門範例),用白話來說:

在MVVM裡,UI操作涉及的資料被包成ViewModel類別,接著在UI輸入/顯示元素分別標註其對應到ViewModel某個屬性值。當程式碼改變ViewModel屬性值,其對應的輸入/顯示欄位元素便會自動更新;而在UI欄位填入不同內容,ViewModel的資料屬性也會立刻被修改為新值。

這種雙向繫結(Two-Way Binding)的概念,若使用傳統做法得在ViewModel的屬性修改事件寫程式將新值反應到某個顯示/輸入元素上,還得攔截輸入元素的onChange事件,用程式將最新輸入結果反應到ViewMode屬性上,瑣碎的實做細節蠻多的。而不管是Silverlight/WPF或JavaScript,MVVM程式庫的目標即在節省前述自行開發的工夫,只需在顯示/輸入元素上註明其對應的ViewModel屬性,之後全部交給程式庫自動處理,讓程式開發者能優雅地實現MVVM。

如今,MVVM概念也被搬到網頁開發上,未來大家在ASP.NET MVC的展示中應就會常看到它。在JavaScript領域,過去也有些MVVM程式庫被提出來,例如: 微軟主導的jQuery Data Link Plugin(不過,它跟jQuery Template Plugin一樣,已停止發展,未來會由jsView及jsRender接替,但預估要到2012年中才會進入Beta階段),但顯然都比不上knockout.js所受到的關注與歡迎。

knockout.js的主要特色為:

  • 宣告式語法: 透過DOM元素Attribute宣告完成資料繫結(Data Binding),簡潔方便
  • 自動UI更新: 只要Model資料改變,UI立即反映
  • 相依性追蹤: 源頭資料變動時,可自動追溯所有關連的資料一起改變
  • 支援範本(Template): 開放自訂Template決定Model資料輸出結果,可滿足各式客製需求
  • 免費、Open Source
  • 純JavaScript - 可跟jQuery或其他JavaScript Framework併用無虞
  • 輕薄短小,Minified版本只有40KB,HTTP壓縮後只有14KB
  • 跨瀏覽器! 支援IE6+, FF2, Chrome, Opera, Safari(含行動裝置版本)

要開始體驗knockout.js,建議可由官方網站上超神奇的Web互動教學入門:

教學網站如上所示,網站左上區塊為操作說明,右上為HTML標籤區,右下方為程式碼區,左下區塊則可立即測試結果。按照操作說明,一個步驟一個步驟在HTML區及程式碼區輸入適當的標籤及程式碼,就能立即體驗knockout.js的魔力。另外,官方網站也有極其詳盡的Knockout API說明,則是深入了解knockout.js的有效途徑。

要在ASP.NET專案中體驗knockout.js,最簡單的方法是透過NuGet下載程式庫:

接著寫幾行程式,就能體驗MVVM的威力,如以下的範例:

<!DOCTYPE html>
<html>
<head>
    <title>knockout.js First Lab</title>
    <script src="../Scripts/knockout-2.1.0.debug.js"></script>
</head>
<body>
    <input type="text" id="txtValue" data-bind="value: myValue" />
    <span id="spnValue" data-bind="text: myValue"></span>
    <script type="text/javascript">
        var myViewModel =
        {
            myValue: ko.observable("Darkthread")
        }
        ko.applyBindings(myViewModel);
    </script>
</body>
</html>

在以上網頁,我宣告了一個<input>一個<span>,並定義了只有一個myValue屬性的超簡單ViewModel: myViewModel物件。透過data-bind="value: myValue"將myValue屬性綁到<input>的value值,透過data-bind="text: myValue"將屬性反映到<span>中,而myValue需透過ko.observable()宣告,knockout.js才能偵測到屬性值的變化,以便連動所有相關的UI元素。最後,要呼叫ko.applyBindings()將myViewModel繫結到網頁元素上,由於本例未引用jQuery,無$.ready()可用,所以把<script>放在網頁的最後端以確保ko.applyBindings()在網頁元素都載入後才執行。

網頁運行後,<input>與<span>一開始會顯示Darkthread,試著改變<input>的值,可發現<span>會馬上反應修改後的結果。很酷吧!!

我對ASP.NET MVC 4提到的SPA(Single Page Application)很有興趣,而knockout.js是其中重要的一環,將陸續分享一些學習心得。

PS: SPA最簡單的比喻就是像GMail那種在同一個網頁中做完全部操作,不觸發任何PostBack的設計哲學。之前我在jQuery教學中也做過粗淺示範,但當時是純手工打造,未來在ASP.NET MVC架構下實現,已有許多現成配套,相關的3rd Party程式庫也更成熟,將會省力很多。

[KO系列]

http://www.darkthread.net/kolab/labs/default.aspx?m=post
歡迎推文分享:
Published 09 May 2012 08:00 AM 由 Jeffrey
Filed under:
Views: 72,338



意見

# david.net said on 09 May, 2012 12:37 AM

哈~~  黑大先寫開箱文了~~ 讚!!

那我就可以接下來寫一些應用上的介紹^^

# gattaca said on 09 May, 2012 04:16 AM

搭配SignalR比較省事

# Mesak said on 07 September, 2012 02:06 AM

你好黑大,我想轉貼部分內容到我的網站上去,希望你不介意

demojs.blogspot.tw/.../knockoutjs.html

# lanhu21cn said on 03 July, 2013 02:50 AM

求Kendo UI 教程!

# AYS said on 06 August, 2015 04:42 AM

請問一下,我想知道該怎麼從已經與前端連接的VM中,取出現在的值(或陣列內容)以供其他的JS程式使用?用JQUERY取得的值都是一些code....

# AYS said on 06 August, 2015 05:06 AM

抱歉找到了,直接VM.屬性()就好 orz

# 支點雲端 said on 21 April, 2016 04:09 AM

我們是支點雲端科技,由三民補習班成立的線上教學機構,朝著建立技術人群聚地的目標前進。

不知您是否有意願貢獻所學?我的email是: vincent.leverage@gmail.om

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2012>
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication