KO範例7 - visible, disable, css繫結

2012-09-12 06:11 AM

10,964

範例7很簡單，示範如何透過屬性控制HTML元素顯示與否(visible)、可以操作與否(disable)，以及依屬性決定是否加上特定CSS class。線上展示最前方的Checkbox，勾選後TextBox會設為disabled，後方會出現一個內含"完成!"文字的&...

KO範例6 - 陣列元素的新增/移除事件

2012-09-11 07:27 AM

12,269

範例4已展示KO完全掌握observableArray()陣列元素增減，即時反應在UI的能力。但如果我們希望在陣列增加或移除元素時加上自訂邏輯，要怎麼做? foreach提供了afterAdd及beforeRemove兩個額外的事件繫結設定，允許在陣列新增、移除元素時執行特定邏輯。在此繼續沿用先...

KO範例5 - 即時反應物件屬性變化

2012-09-10 06:37 AM

10,665

在範例4使用了totalScore ko.computed函數即時加總全部使用者的積分，經實實測，新增或移除資料時積分總和會立即改變。如果是修改某一筆使用者績分呢? $("#btnChgScore").click(function () { &...

KO範例4 - 以清單方式呈現資料

2012-09-09 05:24 PM

18,699

接著來看如何用KO處理超級基本的網頁設計議題--以清單方式呈現資料。想處理以陣列形式儲存的多筆資料，要先認識foreach。在ViewModel定義一個JavaScript Array或是ko.observableArray() (observableArray在新增或剔除陣列元素時，KO會...

KO範例3 - 動態新增下拉選單選項

2012-09-08 07:51 AM

22,906

在範例2中提到<select> data-bind的options選項若繫結到ko.observableArray()，可實現動態新增選項效果，範例3就來測試這項特性。 ViewModel中宣告一個selectOptions屬性，為一ko.observableArray()物件...

KO範例2 - 下拉選單

2012-09-07 06:11 AM

27,906

下拉選單<select>也是網頁設計重要的一環，knockout.js(以下簡稱KO)也有不錯的支援。針對<select>，在data-bind除了用value可對應下拉選單的選取結果，其選項也可以由ViewModel中取得，甚至動態改變。以下是<select>...

KO範例1 - 計算型屬性

2012-09-06 11:37 PM

21,045

knockout.js是一套令人驚豔的JavaScript MVVM程式庫，透過MVVM的運作原理，開發程式時只需專注於定義ViewModel邏輯，不需耗費心力處理TextBox、Select的onchange、onclick等互動細節，就能實現UI元素與資料天人合一的境界。身為網頁開發老鳥，雖...

CODE-以jQuery循序執行AJAX呼叫，並依結果決定是否繼續

2012-09-05 03:53 PM

24,559

很繞口的標題，不過就是我這次挑戰的需求。用Google Map API轉換地址時，曾示範過利用$.when().then()等待所有$.ajax()呼叫都完成後才執行顯示地圖的jQuery寫法，但這次的情境有點不同。每次處理1到多筆AJAX呼叫(透過$.post()) 多筆...

處理JavaScript字串特殊字元? 閃開，讓專業的來!

2012-09-04 02:54 PM

15,768

之前為處理JavaScript字串的特殊字元寫過函數，今天發現.NET 4.0新增了HttpUtility.JavaScriptStringEncode，代表以後不用再自己土法鍊鋼DIY了，乖乖閃開，讓專業的來! (再一次，老鳥的身價持續走貶...) 順手測過效能: usin...

筆記-JavaScript class保留字

2012-09-03 07:57 AM

7,384

在發現Kendo UI Grid隱藏功能-指定欄位CSS一文的範例中，我提到用 { field: "price", title: "Price ($)", attributes: { class:"right-align", &quo...

5碼郵遞區號轉3碼JSON，一場LINQ花式操槍表演

2012-09-02 03:57 PM

20,927

一開始，我只是為了某個Knockout程式範例，打算花十分鐘把3+2郵遞區號XML轉檔程式稍做整理，改寫成輸出3碼資料JSON而已，沒想到魔鬼都在細節裡，資料裡幾則特殊案例，搞得我手忙腳亂汗水直滴，最後花了一個半小時才達成目的，驗證傳說中"工程師預估的時程根本是放屁只能純參考"所言不虛... ...

reCAPTCHA威風不再?

2012-09-01 12:34 AM

45,354

去年換裝reCAPTCHA後，連人類都很難看懂的變態OCR文字(其實大家在無形中參與了古書籍的數位化)，成功擊退機器人大軍，垃圾留言從此絕跡。近一個月，網站開始冒出許多垃圾留言，跟當年決定換掉TrimothyHUmphrey’s CAPTCHA時的情境相仿，三不五時會冒出一堆看不懂的洋文...

ASP.NET MVC小改裝 - 以Json.NET取代JavaScriptSerializer

2012-08-30 11:23 PM

35,886

在前篇文章中，我們實測驗證ASP.NET MVC 4的JsonResult採用JavaScriptSerializer進行JSON序列化，然而若要100%確認，其實還有更精準的做法--因為ASP.NET MVC 4是一個Open Source專案，Use the source, Luke! 由...