knockout.js也支援繫結到網頁元素的事件，例如: keypress、click、mouseover、mouseout... 等都沒問題。但如果純粹要在特定事件加入程式邏輯，大可使用jQuery來做，突顯不出KO的強悍。依我個人看法，KO的事件繫結真正犀利之處在於搭配foreach、wit...

假想以下情境，ViewModel有個players屬性，為一ko.observableArray，其中的元素為player，具有name及bestRecord兩個屬性，其中bestRecord預期會再包含date及score屬性。 在網頁上，打算用foreach將每個player以<li...

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

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

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

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

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

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

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

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

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

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

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

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