Browse by Tags

KO範例15 - 訂閱屬性變更事件
在Knockout預設機制中,能感應ViewModel屬性的改變,自動更新UI元素或是依據依賴關係重算ko.computed()函數,除此之外,我們還能"訂閱"屬性改變事件,以便在屬性值被修改時執行特定邏輯。 第一種做法是利用ko.observable()的.subscribe()訂閱,例如: viewModel.someProp.subscribe( function (newValue) { //在本例中, someProp是一個ko.observable() //此段程式會在sombProp被賦與新值時被觸發...
Posted 25 September 2012 10:40 PMJeffrey | with no comments 6,654
Filed under:
KO範例14 - JavaScript物件與JSON轉換
利用knockout.js將網頁輸入結果對應到ViewModel,後續常需將其再轉為JavaScript物件或JSON字串抛至後端。由於ViewModel主要使用ko.observable()及ko.observableArray(),以JavaScript物件觀點為方法函數(function)而非一般保存資料的屬性,進行JSON轉換時內容不會被保留。例如: ​ function MyViewModel() {     var self = this;    ...
Posted 24 September 2012 11:16 PMJeffrey | with no comments 16,775
Filed under:
KO範例13 - Template範本功能
Template範本(或稱為樣版)功能主要用於同一組輸出樣式需反覆套用多次的情境,在先前 foreach範例 中,<tbody>內含的HTML元素便是一種範本,重複套用在每一筆資料以產生<tr>。除了將範本直接定義在容器元素內,範本內容也可另存於<script type="text/html" id="tmpl_id"></script>中(將範本定義藏在<script>的技巧,在jQuery Template也...
Posted 23 September 2012 11:33 PMJeffrey | with no comments 9,035
Filed under:
KO範例12 - 使用自訂繫結整合KendoUI
雖然knockout.js已經提供很多好用的繫結,例如: value、text、checked、attr、css... 等等,但實務上一定有無法滿足需求的情境。針對這點,KO允許開發者自訂繫結行為,以滿足專案中稀奇古怪的需求。這已屬進階型應用,但深入了解後就會發現此一擴充特性,讓KO更顯威力強大!! 舉一個常見但重要的需求: 到目前為止,我們繫結的輸入欄位都是Select、TextBox、CheckBox等標準HTML元素,但實務上這類瀏覽器標準操作元件常被使用者嫌棄,嫌土嫌無趣,通常得改用 jQuery...
Posted 22 September 2012 10:07 PMJeffrey | with no comments 13,995
Filed under: ,
KO範例11–hasfocus繫結
依我個人觀點, hasfocus繫結 的實用性較低,但應該還是有適用的場合。簡單地說,它可以將Boolean屬性繫結到可取得輸入焦點的HTML元素上(例如: TextBox、CheckBox、RadioButton、Select、Button...)形成雙向繫結,當元素取得焦點時,ViewModel屬性會被更新為true;若屬性值被改為true,輸入焦點也會移至元素上。 範例11簡單展示其運作原理: 線上展示 網頁上有兩個<input type="text">,姓名輸入欄繫結到ViewModel的nameFocus屬性...
Posted 17 September 2012 06:14 AMJeffrey | 4 comment(s) 8,856
Filed under:
KO範例10 - checked繫結
針對checkbox, radio等HTML元素,knockout.js提供了checked繫結。有三種應用方式: 配合多個radio,使用相同的name形成多選一,每個radio有不同的value,KO會將被點選radio的value設成到指定的ViewModel屬性上;而當ViewModel屬性改變時,也會改變radio的點選狀態。 <input type="radio" name="boo" value="A" data-bind...
Posted 16 September 2012 10:04 PMJeffrey | with no comments 10,600
Filed under:
KO範例9 - 事件繫結
knockout.js也支援繫結到網頁元素的事件,例如: keypress、click、mouseover、mouseout... 等都沒問題。但如果純粹要在特定事件加入程式邏輯,大可使用jQuery來做,突顯不出KO的強悍。依我個人看法,KO的事件繫結真正犀利之處在於搭配foreach、with使用,如同 KO範例4 清單的移除按鈕click事件,可以接收一個data參數,直接指向該元素所繫結的資料物件對象做進一步應用。 在範例9中,用了foreach將一個具有三原色名稱的字串陣列繫結到<div>上...
Posted 14 September 2012 07:44 PMJeffrey | 1 comment(s) 8,106
Filed under:
KO範例8 - if及with的應用
假想以下情境,ViewModel有個players屬性,為一ko.observableArray,其中的元素為player,具有name及bestRecord兩個屬性,其中bestRecord預期會再包含date及score屬性。 在網頁上,打算用foreach將每個player以<li>方式呈現, <ul data-bind="foreach: players">     <li>        ...
Posted 13 September 2012 06:18 AMJeffrey | 2 comment(s) 10,417
Filed under:
KO範例7 - visible, disable, css繫結
範例7很簡單,示範如何透過屬性控制HTML元素顯示與否( visible )、可以操作與否( disable ),以及依屬性決定是否加上特定 CSS class 。 線上展示 最前方的Checkbox,勾選後TextBox會設為disabled,後方會出現一個內含"完成!"文字的<span>,若輸入文字出現"急"字,則TextBox會再加上urgent CSS Class。關鍵在於TextBox及Span的data-bind設定: <input...
Posted 12 September 2012 06:11 AMJeffrey | with no comments 10,144
Filed under:
KO範例6 - 陣列元素的新增/移除事件
範例4 已展示KO完全掌握observableArray()陣列元素增減,即時反應在UI的能力。但如果我們希望在陣列增加或移除元素時加上自訂邏輯,要怎麼做? foreach提供了afterAdd及beforeRemove兩個額外的事件繫結設定,允許在陣列新增、移除元素時執行特定邏輯。在此繼續沿用先前的使用者清單呈現範例,加上兩個效果: 新增資料時,將最新加入的資料標為暗紅字 刪除資料時,加上資料淡出後消失的特效 而在ViewModel裡我們加上兩個函數: //第一次foreach產生時不會觸發,只有事後加入才會...
Posted 11 September 2012 07:27 AMJeffrey | 5 comment(s) 13,694
Filed under:
KO範例5 - 即時反應物件屬性變化
在 範例4 使用了totalScore ko.computed函數即時加總全部使用者的積分,經實實測,新增或移除資料時積分總和會立即改變。如果是修改某一筆使用者績分呢? $("#btnChgScore").click(function () {      vm.users()[0].score = 9999; }); 我們加入一個按鈕模擬修改積分的情境,程式先用vm.users()傳回UserViewModel物件陣列(因為users是ko...
Posted 10 September 2012 06:37 AMJeffrey | with no comments 9,458
Filed under:
KO範例4 - 以清單方式呈現資料
接著來看如何用KO處理超級基本的網頁設計議題--以清單方式呈現資料。 想處理以陣列形式儲存的多筆資料,要先認識 foreach 。在ViewModel定義一個JavaScript Array或是ko.observableArray() (observableArray在新增或剔除陣列元素時,KO會立刻察覺反應到UI,普通Array則不會),然後在某個容器形HTML元素(例如: div, ul, tbody... )宣告data-bind="foreach: arrayPropName"...
Posted 09 September 2012 05:24 PMJeffrey | 8 comment(s) 18,183
Filed under:
KO範例3 - 動態新增下拉選單選項
在範例2中提到<select> data-bind的options選項若繫結到ko.observableArray(),可實現動態新增選項效果,範例3就來測試這項特性。 ViewModel中宣告一個selectOptions屬性,為一ko.observableArray()物件,並將其設為<select>的options下拉選項資料來源,再用兩個<input>分別輸入Text及Value,按鈕後將輸入內容新增成selectOptions的元素,此時就可看到下拉選單出現新增的選項內容...
Posted 08 September 2012 07:51 AMJeffrey | 2 comment(s) 21,618
Filed under:
KO範例2 - 下拉選單
下拉選單<select>也是網頁設計重要的一環,knockout.js(以下簡稱KO)也有不錯的支援。針對<select>,在data-bind除了用value可對應下拉選單的選取結果,其選項也可以由ViewModel中取得,甚至動態改變。以下是<select>常用的data-bind參數: options : 指向陣列或ko.observableArray(),KO會將陣列元素轉換為下拉選項。如果是ko.observableArray(),當動態增加或移除陣列元素時...
Posted 07 September 2012 06:11 AMJeffrey | 2 comment(s) 25,967
Filed under:
KO範例1 - 計算型屬性
knockout.js是一套令人驚豔的 JavaScript MVVM程式庫 ,透過MVVM的運作原理,開發程式時只需專注於定義ViewModel邏輯,不需耗費心力處理TextBox、Select的onchange、onclick等互動細節,就能實現UI元素與資料天人合一的境界。身為網頁開發老鳥,雖早已具備徒手打造類似互動網頁的能力,但在領略過knockout.js的簡潔精巧、強韌不易出錯,相見恨晚的心情油然而生... 如此神兵利器,不多善用實在可惜,這一系列的KO範例也是我的學習筆記,將逐一探討knockout...
Posted 06 September 2012 11:37 PMJeffrey | with no comments 19,542
Filed under:
更多文章 « 上一頁 - 下一頁 »

搜尋

Go

<December 2021>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication