Template範本(或稱為樣版)功能主要用於同一組輸出樣式需反覆套用多次的情境，在先前foreach範例中，<tbody>內含的HTML元素便是一種範本，重複套用在每一筆資料以產生<tr>。除了將範本直接定義在容器元素內，範本內容也可另存於<script type...

雖然knockout.js已經提供很多好用的繫結，例如: value、text、checked、attr、css... 等等，但實務上一定有無法滿足需求的情境。針對這點，KO允許開發者自訂繫結行為，以滿足專案中稀奇古怪的需求。這已屬進階型應用，但深入了解後就會發現此一擴充特性，讓KO更顯威力強大...

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

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

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元素與資料天人合一的境界。身為網頁開發老鳥，雖...

各位老師、各位同學，我今天要示範的網頁介面開發技巧是--拖拉元素調整排序，(停頓兩秒)，拖拉元素調整排序... 開始前，請大家先看示範網頁，網頁上會顯示五個<span>方塊，假設其排序有特定意義(例如: 出場順序，決定先用皮卡丘之後再派妙蛙種子之類的)，使用者可用滑鼠或手指直接拖曳...

這篇文章算SignalR的進階應用，還不知道SignalR是啥的朋友，可先參考91與小朱的介紹文再繼續閱讀: [.NET]SignalR簡介 - 建立 realtime 的網站 by 91 [.NET] SignalR: 一個改變 Web 應用開發觀念的開發方式 by 小朱 ...

如果說jQuery是林志玲，那麼knockout.js可比陳妍希，同樣讓人一見傾心!! 這就是我初見knockout.js的感想。 knockout.js是一套JavaScript UI程式庫，主要用來在網頁實現MVVM設計模式。MVVM已在微軟WPF/Silverlight/WP7中廣泛應用...