當初評估由KO轉換成NG,與Kendo UI的整合度也是重要考慮依據,KO有社群發展的knockout-kendo可用,Kendo UI則是Kendo UI Labs Team推出Angular Kendo UI,雖然未納入正式官方支援,但可算是經官方認可的程式庫。

關於Angular Kendo UI的使用方法,可以參考這篇Telerik部落格文章,另外有一個精美的展示網站,資訊蠻完整的,這裡僅簡單整理重點:

  1. angular-kendo.js可由Github取得
  2. 除了用<script src="…">引用angular-kendo.js,模組註冊時不要忘記引用"kendo.directives"
    angular.module("someApp", ["kendo.directives"]).controller(…
  3. 加上kendo-* Directive,HTML元素就會自動轉成Kendo UI控件,例如: <input kendo-date-picker>就變成日期選擇器
  4. 基本上,Kendo UI API文件Configuration裡提到的參數,可以用k-*="…"的方式寫在HTML上。例如: DropDownList有dataTextField參數,使用Angular Kendo UI時可以寫成<select kendo-drop-down-list k-date-text-field="'name'" …>,k-* Directive填入的內容也可以是$scope的屬性,例如: <select kendo-drop-down-list k-data-source="dataSourceObjectInScope" >
  5. 另一種做法,是將全部設定變成$scope下的物件(例如: theOptions),然後用k-options一次搞定,例如: <select kendo-drop-down-list k-options="theOptions">
  6. ng-model=""繫結到HTML欄位的Value(永遠是字串型別),如果要繫結到Kendo UI控件提供的結果資料型別(例如: 日期選擇器時取得日期物件、數字輸入欄位時要取得數字型別),則要用k-ng-model=""
  7. 寫成<div kendo-window="win">,相當於將$("…").data("kendoWindow")傳回的Kendo UI物件繫結到$scope.win,後續可用$scope.win.open()加以操控。
  8. 加入k-rebind="屬性名稱",讓Kendo UI在該屬性改變時,重新套用所有k-*設定。
  9. k-ng-delay="屬性名稱"跟k-rebind有點像,應用場合是一開始資料還未備齊前先不要建立Kendo UI物件,當指定屬性名稱改變時才初始化。

另外,有一些應用實務提示: 參考

  1. 如同KO有observable/observableArray/computed、NG有$apply(),如果希望資料異動能即時反應到Kendo UI控件,需改用kendo.data.ObservableObject()kendo.data.ObservableArray()kendo.data.DataSource()
  2. 透過k-*指定事件時,不要忘記傳入事件參數物件,例如: <select kendo-drop-down-list k-on-change="change(kendoEvent)">
  3. 在Kendo UI事件更動$scope屬性後,記得使用$scope.$apply()將異動反應到Angular繫結的元素上。
  4. k-*在指定字串值時不要忘記加上單引號,否則將被視為$scope的屬性名稱。例如: <select … k-data-text-field="name">等同$scope.name,應寫成<select … k-data-text-field="'name'">
  5. 善用<div kendo-window="win">將Kendo UI物件保存在$scope.win,比$("#win").data("kendoWindow")省事,也免除從ViewModel存取UI的疑慮。
  6. Kendo UI常會出現容器從屬關係,例如: KendoWindow內含KendoGrid,此時應留意二者的Scope間的繼承關係。
[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs

Comments

Be the first to post a comment

Post a comment