依我個人觀點，hasfocus繫結的實用性較低，但應該還是有適用的場合。簡單地說，它可以將Boolean屬性繫結到可取得輸入焦點的HTML元素上(例如: TextBox、CheckBox、RadioButton、Select、Button...)形成雙向繫結，當元素取得焦點時，ViewModel...

針對checkbox, radio等HTML元素，knockout.js提供了checked繫結。有三種應用方式: 配合多個radio，使用相同的name形成多選一，每個radio有不同的value，KO會將被點選radio的value設成到指定的ViewModel屬性上；而當ViewM...

從Windows NT以來，檔案系統開始支援存取權限設定，但這個技巧今天才學會。 在Windows裡將資料夾複製到另一個位置時，複製後的目錄及檔案預設會套用新位置的權限設定。今天想把網站搬到其他磁碟機，卻發現網站部分目錄被賦與IIS虛擬帳號寫入權限，複製過去後寫入權限設定遺失，導致網站無法...

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而已，沒想到魔鬼都在細節裡，資料裡幾則特殊案例，搞得我手忙腳亂汗水直滴，最後花了一個半小時才達成目的，驗證傳說中"工程師預估的時程根本是放屁只能純參考"所言不虛... ...