Kendo-UI-SPA文檔

1、 HYPERLINK /Wayou/archive/2013/04/13/kendo_ui_SPA_1.html Kendo UI SPA文檔Kendo UI單頁(yè)面程序中文文檔Kendo UI SPA Documentation（translated from the official site）概覽Kendo UI 單頁(yè)面程序（SingleApplication, 簡(jiǎn)稱(chēng)SPA）是一系列的類(lèi)，旨在簡(jiǎn)化基于客戶端的程序的創(chuàng)建。關(guān)于單頁(yè)面程序的更多信息可從維基百科 HYPERLINK /wiki/Single_application t _blank 相關(guān)條目獲得。路由（Router）類(lèi)負(fù)責(zé)程序狀

2、態(tài)跟蹤和在不同狀態(tài)間切換，通過(guò)將URL（#page）中關(guān)于頁(yè)面的片段嵌入到瀏覽器歷史記錄，使得URL可以被存為書(shū)簽和可進(jìn)行鏈接。同時(shí)，路由類(lèi)也用于在編程中改變程序的狀態(tài)和在頁(yè)面間切換。視圖（View）和布局（Layout）類(lèi)用于展現(xiàn)界面（UI）。頁(yè)面展現(xiàn)的事件和數(shù)據(jù)的綁定可以通過(guò)MVVM方式，也可以通過(guò)給HTML標(biāo)簽添加數(shù)據(jù)屬性（數(shù)據(jù)屬性聲明）的方式來(lái)實(shí)現(xiàn)。一個(gè)關(guān)于Kendo UI SPA 的Hello World 程序Hellovarindex=newkendo.View(index,/ the id of the script element that contains the view

3、markupmodel:kendo.observable(foo:World!);varrouter=newkendo.Router();router.route(/,function()index.render(#app););$(function()router.start(););路由路由概覽路由（Router）類(lèi)負(fù)責(zé)程序狀態(tài)跟蹤和在不同狀態(tài)間切換，通過(guò)將URL（#page）中關(guān)于頁(yè)面的片段嵌入到瀏覽器歷史記錄，使得URL可以被存為書(shū)簽和可進(jìn)行鏈接。同時(shí)，路由類(lèi)也用于在編程中改變程序的狀態(tài)和在頁(yè)面間切換。當(dāng)使用路由機(jī)制在頁(yè)面間切換時(shí)，會(huì)觸發(fā)一個(gè)Change事件，適合用于權(quán)限驗(yàn)證。帶回調(diào)函

4、數(shù)的一個(gè)路由演示，定位到根路由varrouter=newkendo.Router();router.route(/,function()console.log(/ url was loaded););$(function()router.start(););默認(rèn)情況下，如果URL中關(guān)于頁(yè)面的片段未指定，則根路由（/ route）的回調(diào)函數(shù)會(huì)被觸發(fā)執(zhí)行。init 事件的處理器會(huì)忽略初始URL而執(zhí)行。參數(shù)路由機(jī)制實(shí)現(xiàn)了大部分Ruby on Rails 式的路由格式，包括支持路由綁定，可選參數(shù)項(xiàng)以及路由通配符。從URL中解析出來(lái)的參數(shù)將會(huì)傳遞到路由的回調(diào)函數(shù)中去。參數(shù)解析varrouter=newk

5、endo.Router();router.route(/items/:category/:id,function(category,id)console.log(category,item with,id, was requested););$(function()router.start();/ .router.navigate(/items/books/59););可選參數(shù)varrouter=newkendo.Router();router.route(/items(/:category)(/:id),function(category,id)console.log(category,it

6、em with,id, was requested););$(function()router.start();/ .router.navigate(/items/books/59);/ .router.navigate(/items);/ .router.navigate(/items/books););路由通配符varrouter=newkendo.Router();router.route(/items/*suffix,function(suffix)console.log(suffix););$(function()router.start();/ .router.navigate(/

7、items/books/59);/ .router.navigate(/items);/ .router.navigate(/items/books););導(dǎo)航導(dǎo)航方法可以用來(lái)將頁(yè)面轉(zhuǎn)至其他頁(yè)面。被指向的路由將會(huì)被觸發(fā)。導(dǎo)航操作將改變RUL中關(guān)于頁(yè)面的部分。點(diǎn)擊超鏈接同樣可以觸發(fā)相關(guān)路由 一個(gè)帶有href=#/foo屬性的連接將會(huì)觸發(fā)/foo 路由的回調(diào)函數(shù)。路由導(dǎo)航Foovarrouter=newkendo.Router();router.route(/foo,function()console.log(welcome to foo););$(function()router.start()

8、;router.navigate(/foo););路由缺失與導(dǎo)航取消如果沒(méi)有匹配的路由地址，則路由機(jī)制會(huì)觸發(fā)routeMissing事件并把沒(méi)找到的這個(gè)URL傳到事件處理器中。處理路由缺失varrouter=newkendo.Router(routeMissing:function(e)console.log(e.url);$(function()router.start();router.navigate(/foo););每當(dāng)URL中頁(yè)面片段改變時(shí)，會(huì)觸發(fā)一個(gè)change事件。在其事件處理器中調(diào)用preventDefault會(huì)使RUL返回到變化前的狀態(tài)。路由的取消varrouter=newk

9、endo.Router(change:function(e)console.log(url);e.preventDefault(););$(function()router.start();router.navigate(/foo););視圖視圖概覽視圖類(lèi)實(shí)例化并處理程序中特定頁(yè)面的事件。頁(yè)面展現(xiàn)的事件和數(shù)據(jù)的綁定可以通過(guò)MVVM方式，也可以通過(guò)給HTML標(biāo)簽添加數(shù)據(jù)屬性（數(shù)據(jù)屬性聲明）的方式來(lái)實(shí)現(xiàn)。視圖的內(nèi)容可能通過(guò)指定包含HTML的字符串來(lái)定義，也可以通過(guò)指定事件創(chuàng)建好的包含HTML標(biāo)記的Script模板來(lái)定義，只需指定模板的Id即可。默認(rèn)情況下，視圖的內(nèi)容會(huì)用標(biāo)記來(lái)包裝，你可以通過(guò)指定t

10、agName來(lái)使用其他標(biāo)記。使用包含HTML的字符串來(lái)定義視圖varindex=newkendo.View(Hello World!);使用包含HTML標(biāo)記的Script模板來(lái)定義視圖HelloWorld!varindex=newkendo.View(index);渲染視圖的內(nèi)容視圖的渲染是通過(guò)調(diào)用render方法實(shí)現(xiàn)的，該方法可以接收jQuery選擇器（或者Object類(lèi)型）的參數(shù)來(lái)指定內(nèi)容將會(huì)顯示在哪個(gè)地方。另外，render方法在調(diào)用時(shí)也可以不指定參數(shù)，用來(lái)返回視圖的內(nèi)容，以便在其他場(chǎng)合手動(dòng)地使用這些內(nèi)容。視圖將會(huì)在它的render方法第一次被調(diào)用的時(shí)候?qū)λ膬?nèi)容進(jìn)行渲染。如果視圖內(nèi)容是

11、通過(guò)Script模板指定的，則這個(gè)模板需要在渲染前已經(jīng)存在于HTML文檔的DOM模型當(dāng)中。視圖可以在路由的init事件中進(jìn)行渲染，也可以在路由的路由回調(diào)函數(shù)當(dāng)中進(jìn)行。將視圖內(nèi)容渲染到容器中varindex=newkendo.View(Hello World!);index.render(#app);之后對(duì)視圖render方法的調(diào)用都不會(huì)再次對(duì)視圖內(nèi)容進(jìn)行渲染，而是返回已經(jīng)存在的內(nèi)容的引用，或者將內(nèi)容放到指定的元素內(nèi)，如果調(diào)用時(shí)指定了參數(shù)的話。附加視圖內(nèi)容varindex=newkendo.View(Hello World!);$(#app).append(index.render();MVVM

12、集成如果一個(gè)可遍歷對(duì)象被當(dāng)作一個(gè)模型傳入到一個(gè)視圖的構(gòu)造函數(shù)中，則視圖在初始化后會(huì)被綁定到這個(gè)模型上。如果沒(méi)有提供模型，則視圖的內(nèi)容會(huì)使用 HYPERLINK /getting-started/data-attribute-initialization t _blank 數(shù)據(jù)屬性初始化。MVVM綁定的視圖Hello!varmodel=kendo.observable(foo:World);varindex=newkendo.View(index,model:model);刪除/銷(xiāo)毀視圖某些場(chǎng)合下，一個(gè)視圖會(huì)被銷(xiāo)毀以釋放占用的瀏覽器資源。當(dāng)被銷(xiāo)毀后，與該視圖相關(guān)的DOM元素會(huì)被移除，與之關(guān)聯(lián)的M

13、VVM綁定也會(huì)消除。布局布局概覽布局繼承自視圖，它提供了額外的功能用于將布局/視圖展現(xiàn)在元素中。使用布局展示視圖使用布局展示視圖varview=newkendo.View(Foo);varlayout=newkendo.Layout(Header);layout.render($(#app);layout.showIn(#content,view);由于布局本質(zhì)上也是一個(gè)視圖，所以可以將一個(gè)布局的實(shí)例傳入showIn方法體中，并且允許多層這樣的嵌套。當(dāng)一個(gè)視圖被指定到一個(gè)已經(jīng)放置了視圖的地方時(shí)，之前的那個(gè)視圖會(huì)被隱藏（其元素會(huì)從DOM解除），并且之前那個(gè)視圖的hide方法也被隱藏覆蓋掉了。使用布局切換視圖使用布局切換視圖varfo