NG筆記15-整合KendoUI

當初評估由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間的繼承關係。