Category: knockoutjs

為了確保Server端及Client端的ViewModel一致,在專案中我使用T4自動產生對應C# Class及JavaScript function,如此可確保ASP.NET端拋出的ViewModel與Client端的ViewModel完全一致,雖然這點Knockout Mapping Plu...

ko.computed()能追蹤所依賴的ko.observable()或ko.observableArray(),在其變化時自動重算,開發時依直覺寫出關連邏輯,屬性間便會依預期變化。使用起來固然方便,但是當依賴對象連續變化時,要留意反覆重算的必要性以及對效能的衝擊。用一個範例來說明: ...

專案遇到的小需求,如上圖所示,某UI有四種操作模式,規格要求提供四個按鈕,用來切換模式。當模式啟用時,該按鈕要呈現反白,方便使用者掌握模式狀態。 這個需求用Knockout不難實作,利用click繫結將四顆按鈕的點擊事件都對應到setMode函數,由於四鈕共用一個函數,我們需要由event...

knockout.js內建enable繫結,可透過ViewModel的布林值切換<input>、<textarea>及<select>啟用與否產生唯讀效果。工作專案中有些輸入欄位採用的Knockout-Kendo所繫結的Kendo DatePicker及Num...

利用Checkbox模擬Radio清單的互斥選項是我常用的UI風格,之前曾用jQuery實作過,現在網頁都搬到Knockout的場子,少不了也要重現相同功能,順便考驗KO的能耐。(為何不直接用下拉選單就好? 這裡有一個好理由) 廢話不多說,直覺用以下Demo定義規則! (PS: 寫得太順手,不...

前陣子才安裝VS2012 Update 2,剛好有機會回頭寫Knockout,隱隱覺得VS2012變好用了~ 驚喜地發現Intellisense開始認得Knockout的click、text等關鍵字,甚至還會提示自訂ViewModel的屬性名稱。 今天查到John Papa的文章,證實這是VS...

基於安全考量,系統多會要求密碼具備一定複雜度,例如: 至少幾個英文字母、幾個數字、長度大於幾碼... 等等。傳統做法會在打完密碼或送出表單前檢查,不符要求時彈出警示,前幾天在某個註冊網頁看到更體貼的UI設計,深得我心: 如上圖所示,密碼輸入區上方清楚條列密碼複雜度要求。在打字過程,已符合項...

來談一個MVVM實務上超級常見的問題: 透過Binding宣告可以輕易將ViewModel屬性繫結到視覺元素上顯示,但數字、日期等內容常需依指定格式呈現才容易閱讀,因此在繫結時多半需要指定格式,例如: XAML在Binding時就可以透過StringFormat指定格式。但Knockout預設的...

之前有個錯誤認知,想像Knockout會在ko.computed宣告時期分析其與哪些obersvable相依,藉此訂閱變更事件,實現相依observable變動後立即重算的能力。在範例20時踢到鐵板! 情境是ko.computed因if條件式在某些情況下不會讀取observable,沒想到此後該...

這個範例回到我當年寫公司內部系統第一天就碰上的需求--輸入員工編號後,後方欄位需自動帶出員工姓名。 在開始之前,要先準備一個簡單的伺服器端查詢程式(EmpData.ashx)當內應,送入員編後要傳回包含EmpNo, EmpName資料的JSON格式(查不到時EmpNo與EmpName為null...

下拉選單間的連動在網頁設計十分普遍,例如: 主分類與次分類兩個下拉選單,選好主分類後,次分類的下拉選項要立即變成該主分類底下的次分類項目;另一個經典的例子則是---縣市鄉鎮與郵遞區號選取介面,幾乎是網頁開發的必修學分,網路上有不少範例及現成套件。 傳統做法就是在兩個下拉選單的onchange事件...

接著我們來玩玩Knockout + Ajax,目標是做出如下介面,以關鍵字查詢顏色名稱: 這種需求很多老鳥用膝蓋都寫得出來,但Knockout的寫法肯定讓你耳目一新! 在ViewModel宣告一個ko.observableArray, results, 來放查詢結果,用<ul&g...

ko.computed()可在read/write方法加入邏輯,概念上就跟C#屬性可定義get及set一樣,能實現自訂屬性讀寫規則,如下面的C#範例,有機會在set UserName時實施不合法字元檢核: private string userName = string.Emp...

先前範例中出現的ko.computed()多用於對其他屬性值進行組合或運算,屬唯讀性質。但ko.computed()也支援寫入功能,可將寫入的新值經處理運算後用於更新相關屬性。 針對可寫入式ko.computed,宣告時將不再只傳入單一function,需分別宣告讀、寫對應的函數: s...

在Knockout預設機制中,能感應ViewModel屬性的改變,自動更新UI元素或是依據依賴關係重算ko.computed()函數,除此之外,我們還能"訂閱"屬性改變事件,以便在屬性值被修改時執行特定邏輯。 第一種做法是利用ko.observable()的.subscri...

利用knockout.js將網頁輸入結果對應到ViewModel,後續常需將其再轉為JavaScript物件或JSON字串抛至後端。由於ViewModel主要使用ko.observable()及ko.observableArray(),以JavaScript物件觀點為方法函數(function)...