Browse by Tags

網頁元素異動在IE9出現延遲顯示現象
在IE9遇到一個問題: 透過Knockout text繫結變更SPAN內容,IE9無法立即顯示更新結果,但開啟IE Dev Tools要開始偵查時才回神連忙顯示。切到IE8/7相容模式時不會發生,在其他版本IE(IE10、IE8)或Chrome、Firefox也不曾遇過,推測是IE9渲染(Render)引擎的Bug。 KO範例7 剛好可以用來重現問題。理論上勾選最前方的Checkbox,後方的"完成!"字樣應立刻顯現、取消勾選應立即消失,但如以下示範,使用IE9測試時必須要將滑鼠移至後方文字處點擊一下...
Posted 13 August 2013 08:25 PMJeffrey | with no comments 4,544
Filed under: ,
KO範例27 - ViewModel物件的擴充
為了確保Server端及Client端的ViewModel一致,在專案中我使用T4 自動產生 對應C# Class及JavaScript function,如此可確保ASP.NET端拋出的ViewModel與Client端的ViewModel完全一致,雖然這點 Knockout Mapping Plug-In 也辦得到,但自己產生的JavaScript ViewModel還可以加上 JavaScript Documentation 註解,配合Visual Studio強大的JS Intellisense功能...
Posted 24 July 2013 09:51 PMJeffrey | 1 comment(s) 6,684
Filed under:
KO範例26 - ko.computed()的效能考量
ko.computed()能追蹤所依賴的ko.observable()或ko.observableArray(),在其變化時自動重算,開發時依直覺寫出關連邏輯,屬性間便會依預期變化。使用起來固然方便,但是當依賴對象連續變化時,要留意反覆重算的必要性以及對效能的衝擊。用一個範例來說明: <!DOCTYPE html> <html> <head> <script src= "http://ajax.aspnetcdn.com/ajax/knockout...
Posted 20 July 2013 08:11 AMJeffrey | 2 comment(s) 8,110
Filed under:
KO範例25 – 狀態切換鈕
專案遇到的小需求,如上圖所示,某UI有四種操作模式,規格要求提供四個按鈕,用來切換模式。當模式啟用時,該按鈕要呈現反白,方便使用者掌握模式狀態。 這個需求用Knockout不難實作,利用click繫結將四顆按鈕的點擊事件都對應到setMode函數,由於四鈕共用一個函數,我們需要由event.target識別按鈕來源,模式值被藏在data-mode Attribute。切換背景色的工作則交給css繫結,比對mode()是否與該按鈕對應模式相符,決定要不要加上樣式"on"。搞定收工...
Posted 17 July 2013 08:57 PMJeffrey | with no comments 6,267
Filed under:
KO範例24 – Kendo輸入欄位唯讀切換
knockout.js內建 enable繫結 ,可透過ViewModel的布林值切換<input>、<textarea>及<select>啟用與否產生唯讀效果。工作專案中有些輸入欄位採用的Knockout-Kendo所繫結的Kendo DatePicker及NumericTextBox就不在enable支援之列。為此,我寫了一個自訂繫結kendoEnable,支援DatePciker、NumericTextBox(視需要可再擴充),也能繫結特定屬性切換唯讀: ...
Posted 08 July 2013 11:40 PMJeffrey | with no comments 5,763
Filed under:
KO範例23 – 單選或多選兩用Checkbox清單
利用Checkbox模擬Radio清單的互斥選項是我常用的UI風格,之前曾用jQuery 實作 過,現在網頁都搬到Knockout的場子,少不了也要重現相同功能,順便考驗KO的能耐。(為何不直接用下拉選單就好? 這裡有一個 好理由 ) 廢話不多說,直覺用以下Demo定義規則! (PS: 寫得太順手,不小心連多選的版本都寫進去 XD) 我最開始的想法是開發一個 自訂繫結 ,將ko.observableArray轉成選項,並將勾選結果反應給ko.observable,而選項繫結時還需要像下拉選單一樣指定Text及Value...
Posted 01 July 2013 08:18 PMJeffrey | with no comments 17,031
Filed under:
VS2012 Update 2新增Knockout Intellisense支援
前陣子才安裝 VS2012 Update 2 ,剛好有機會回頭寫Knockout,隱隱覺得VS2012變好用了~ 驚喜地發現Intellisense開始認得Knockout的click、text等關鍵字,甚至還會提示自訂ViewModel的屬性名稱。 今天查到John Papa的 文章 ,證實這是VS2012 Update 2送給Knockout開發者的禮物,我整理成小小的操作展示: 【說明】 在範例中,定義一個ViewModel,內含booProperty屬性及doFoo方法,另外再宣告一個自訂Binding...
Posted 07 May 2013 10:33 PMJeffrey | with no comments 5,833
Filed under:
KO範例22 - 密碼複雜度檢核的貼心提示
基於安全考量,系統多會要求密碼具備一定複雜度,例如: 至少幾個英文字母、幾個數字、長度大於幾碼... 等等。傳統做法會在打完密碼或送出表單前檢查,不符要求時彈出警示,前幾天在某個註冊網頁看到更體貼的UI設計,深得我心: 如上圖所示,密碼輸入區上方清楚條列密碼複雜度要求。在打字過程,已符合項目會變成綠色。當三個條件都滿足,密碼欄位右方會出現打勾圖示;至於再輸入一次密碼的確認欄,會在與密碼欄內容一致時出現綠色勾勾。 激賞之餘,喚起"有為者亦若是"的激昂鬥志,抄起許久未用的knockout...
Posted 23 April 2013 06:43 AMJeffrey | with no comments 8,345
Filed under:
KO範例21 - 指定顯示格式
來談一個MVVM實務上超級常見的問題: 透過Binding宣告可以輕易將ViewModel屬性繫結到視覺元素上顯示,但數字、日期等內容常需依指定格式呈現才容易閱讀,因此在繫結時多半需要指定格式,例如: XAML在Binding時就可以透過 StringFormat 指定格式。但Knockout預設的繫結功能並不支援格式指定,所幸憑藉著KO優異的擴充性,這倒不算頭痛的問題。 我慣用的解法是借用Kendo UI程式庫的kendo.toString()工具函數,它能使用類似.NET string.Format...
Posted 13 October 2012 02:06 PMJeffrey | 5 comment(s) 10,611
Filed under:
Knockout相依性追蹤實驗
之前有個錯誤認知,想像Knockout會在ko.computed宣告時期分析其與哪些obersvable相依,藉此訂閱變更事件,實現相依observable變動後立即重算的能力。在 範例20 時踢到鐵板! 情境是ko.computed因if條件式在某些情況下不會讀取observable,沒想到此後該obersvable的變動便不再觸發重算。這才驚覺,原來的想法錯得離譜!! JavaScript是直譯式語言,未經事先編譯,一定要實際執行過才知函數邏輯,怎麼會出現"宣告時期如何如何"的情境...
Posted 06 October 2012 07:39 AMJeffrey | with no comments 6,304
Filed under:
KO範例20 - 輸入員編帶出員工姓名
這個範例回到我當年寫公司內部系統第一天就碰上的需求--輸入員工編號後,後方欄位需自動帶出員工姓名。 在開始之前,要先準備一個簡單的伺服器端查詢程式(EmpData.ashx)當內應,送入員編後要傳回包含EmpNo, EmpName資料的JSON格式(查不到時EmpNo與EmpName為null)。老樣子,我們使用奧林匹克指定假資料--Colors的141個具名顏色充當員工姓名,依序編為0001到0141號: <%@ WebHandler Language= "C#" Class...
Posted 05 October 2012 09:28 AMJeffrey | 3 comment(s) 12,882
Filed under:
KO範例19 - 下拉選單連動效果
下拉選單間的連動在網頁設計十分普遍,例如: 主分類與次分類兩個下拉選單,選好主分類後,次分類的下拉選項要立即變成該主分類底下的次分類項目;另一個經典的例子則是---縣市鄉鎮與郵遞區號選取介面,幾乎是網頁開發的必修學分,網路上有不少範例及現成套件。 傳統做法就是在兩個下拉選單的onchange事件上做文章,說難不難,但寫起來挺囉索的。這回我們來看看用Knockout如何實現縣市鄉鎮區下拉選單連動。 線上展示 開始之前,我們必須先取得縣市鄉鎮與郵遞區號資料來源,由於時間的關係,我已經預先 烤好 準備了一份...
Posted 04 October 2012 06:52 AMJeffrey | 21 comment(s) 47,916
Filed under:
KO範例18 - 整合Ajax
接著我們來玩玩Knockout + Ajax,目標是做出如下介面,以關鍵字查詢顏色名稱: 這種需求很多老鳥用膝蓋都寫得出來,但Knockout的寫法肯定讓你耳目一新! 在ViewModel宣告一個ko.observableArray, results, 來放查詢結果,用<ul>以foreach繫結到results, 就能逐筆呈現結果。而results的內容怎麼來? 關鍵字查詢結果透過jQuery.getJSON()呼叫名為ColorData.ashx的ASP.NET程式傳回。有趣的是...
Posted 03 October 2012 03:59 PMJeffrey | 3 comment(s) 14,341
Filed under:
KO範例17 - 以ko.computed實現資料檢核
ko.computed()可在read/write方法加入邏輯,概念上就跟C#屬性可定義get及set一樣,能實現自訂屬性讀寫規則,如下面的C#範例,有機會在set UserName時實施不合法字元檢核: private string userName = string .Empty; public string UserName { get { return userName; } set { //檢查是否包含不合法字元 if (containsInvalidChars( value )) throw...
Posted 27 September 2012 10:56 PMJeffrey | with no comments 6,546
Filed under:
KO範例16 - 可寫入式ko.computed()
先前範例中出現的ko.computed()多用於對其他屬性值進行組合或運算,屬唯讀性質。但ko.computed()也支援寫入功能,可將寫入的新值經處理運算後用於更新相關屬性。 針對可寫入式ko.computed,宣告時將不再只傳入單一function,需分別宣告讀、寫對應的函數: self.boo = ko.computed({     read: function() { ...傳回運算結果... },     write: function...
Posted 26 September 2012 11:57 PMJeffrey | with no comments 6,002
Filed under:
更多文章 « 上一頁 - 下一頁 »

搜尋

Go

<July 2018>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication