Kendo UI開發教程 3 初始化Data 屬性
前面在介紹準備Kendo UI開發環境時我們使用jQuery的方法將一個HTML元素轉換成一個Kendo UI控制元件： $(“#datepicker”).kendoDatePicker();除了使用jQuery外掛的方法來初始化方法外，每個Kendo 控制元件還可以通過data屬性來初始化，此時你需要設定data的role屬性，然後呼叫kendo.init方法。使用初始化Data屬性的方法在頁面上包含有大量Kendo UI控制元件時非常便利。 首先， 元件的配置包含在目標元素中，第二無需首先查詢每個元素然後呼叫jQuery方法，你只需呼叫一次kendo.init()方法。Kendo UI Mobile應用通常使用Data屬性來初始化。
如下例使用data 屬性來初始化一個UI元件
1 | <div id="container"> |
2 | <input data-role="numerictextbox" /> |
3 | </div> |
4 | <script> |
5 | kendo.init($("#container")); |
6 | </script> |
其中方法kendo.init($(“#container”)) 會查詢所有包含有data-role屬性的元素，然後初始化這些Kendo UI元件。 每個kendo UI元件的role的值為該UI元件名稱的小寫名字，比如”autocomplete”或”dropdownlist”。
預設情況下，kendo.init 只會初始化Kendo UI Web元件和Kendo UI DataViz元件（按這個順序）。 而Kendo UIMobile應用 首先初始化Kendo UI Mobile元件，然後是Kendo UI Web元件，最後是Kendo UI DataViz元件。 這意味著data-role=”listview” 在Mobile應用中會預設初始化為 Kendo UI Mobile Listview。 然而可以通過指明元件全稱的方法在修改這個預設初始化順序。比如：在Mobile應用中 指明使用Kendo UI Web的listview
1 | <div data-role="view"> |