Kendo UI SPA文档

 

Kendo UI单页面程序中文文档

Kendo UI SPA Documentation(translated from the official site)

 

 

Kendo UI SPA文档_第1张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 概览  

路由  

路由概览  

参数  

导航  

路由缺失与导航取消  

视图 

视图概览 

渲染视图的内容 

MVVM集成  

删除/销毁视图  

布局  

布局概览  

使用布局展示视图  

使用布局切换视图  

 概览

Kendo UI 单页面程序(Single-Page Application, 简称SPA)是一系列的类,旨在简化基于客户端的程序的创建。关于单页面程序的更多信息可从维基百科相关条目获得。

路由(Router)类负责程序状态跟踪和在不同状态间切换,通过将URL(#page)中关于页面的片段嵌入到浏览器历史记录,使得URL可以被存为书签和可进行链接。同时,路由类也用于在编程中改变程序的状态和在页面间切换。

视图(View)和布局(Layout)类用于展现界面(UI)。页面展现的事件和数据的绑定可以通过MVVM方式,也可以通过给HTML标签添加数据属性(数据属性声明)的方式来实现。

一个关于Kendo UI SPA 的Hello World 程序

 

id="app">

 

id="index" type="text/x-kendo-template">

Hello <span data-bind="text: foo">span>

 

 

 

路由

 

 

路由概览

 

路由(Router)类负责程序状态跟踪和在不同状态间切换,通过将URL(#page)中关于页面的片段嵌入到浏览器历史记录,使得URL可以被存为书签和可进行链接。同时,路由类也用于在编程中改变程序的状态和在页面间切换。

当使用路由机制在页面间切换时,会触发一个Change事件,适合用于权限验证。

带回调函数的一个路由演示,定位到根路由

 

 

 

默认情况下,如果URL中关于页面的片段未指定,则根路由("/" route)的回调函数会被触发执行。init 事件的处理器会忽略初始URL而执行。

 

参数

 

路由机制实现了大部分Ruby on Rails 式的路由格式,包括支持路由绑定,可选参数项以及路由通配符。从URL中解析出来的参数将会传递到路由的回调函数中去。

参数解析

 

 

 

 

 

可选参数

 

 

 

路由通配符

 

 

 

 

导航

 

导航方法可以用来将页面转至其他页面。被指向的路由将会被触发。导航操作将改变RUL中关于页面的部分。点击超链接同样可以触发相关路由—— 一个带有href="#/foo"属性的连接将会触发'/foo' 路由的回调函数。

路由导航

 

href="#/foo">Foo

 

 

 

 

路由缺失与导航取消

 

如果没有匹配的路由地址,则路由机制会触发routeMissing事件并把没找到的这个URL传到事件处理器中。

处理路由缺失

 

 

 

 

每当URL中页面片段改变时,会触发一个change事件。在其事件处理器中调用preventDefault会使RUL返回到变化前的状态。

路由的取消

 

 

 

 

 

视图

 

 

视图概览

 

视图类实例化并处理程序中特定页面的事件。页面展现的事件和数据的绑定可以通过MVVM方式,也可以通过给HTML标签添加数据属性(数据属性声明)的方式来实现。视图的内容可能通过指定包含HTML的字符串来定义,也可以通过指定事件创建好的包含HTML标记的Script模板来定义,只需指定模板的Id即可。默认情况下,视图的内容会用

标记来包装,你可以通过指定tagName来使用其他标记。

使用包含HTML的字符串来定义视图

 

 

 

使用包含HTML标记的Script模板来定义视图

 

id="index" type="text/x-kendo-template">

<span>Hello World!span>

 

 

 

 

渲染视图的内容

 

视图的渲染是通过调用render方法实现的,该方法可以接收jQuery选择器(或者Object类型)的参数来指定内容将会显示在哪个地方。另外,render方法在调用时也可以不指定参数,用来返回视图的内容,以便在其他场合手动地使用这些内容。

视图将会在它的render方法第一次被调用的时候对它的内容进行渲染。如果视图内容是通过Script模板指定的,则这个模板需要在渲染前已经存在于HTML文档的DOM模型当中。视图可以在路由的init事件中进行渲染,也可以在路由的路由回调函数当中进行。

将视图内容渲染到容器中

 

id="app">

 

 

 

之后对视图render方法的调用都不会再次对视图内容进行渲染,而是返回已经存在的内容的引用,或者将内容放到指定的元素内,如果调用时指定了参数的话。

附加视图内容

 

id="app">

 

 

 

MVVM集成

如果一个可遍历对象被当作一个模型传入到一个视图的构造函数中,则视图在初始化后会被绑定到这个模型上。如果没有提供模型,则视图的内容会使用数据属性初始化。

MVVM绑定的视图

 

id="index" type="text/x-kendo-template">

<div>Hello <span data-bind="text:foo">span>!div>

 

 

 

删除/销毁视图

某些场合下,一个视图会被销毁以释放占用的浏览器资源。当被销毁后,与该视图相关的DOM元素会被移除,与之关联的MVVM绑定也会消除。

 

  Kendo UI SPA文档_第2张图片

 

 

布局

布局概览

布局继承自视图,它提供了额外的功能用于将布局/视图展现在元素中。

使用布局展示视图

使用布局展示视图

 

id="app">

 

 

 

由于布局本质上也是一个视图,所以可以将一个布局的实例传入showIn方法体中,并且允许多层这样的嵌套。

当一个视图被指定到一个已经放置了视图的地方时,之前的那个视图会被隐藏(其元素会从DOM解除),并且之前那个视图的hide方法也被隐藏覆盖掉了。

使用布局切换视图

使用布局切换视图

 

id="app">

 

 

你可能感兴趣的:(Kendo UI SPA文档)