Kendo UI SPA文档

 

Kendo UI单页面程序中文文档

Kendo UI SPA Documentation(translated from the official site)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 概览  

路由  

路由概览  

参数  

导航  

路由缺失与导航取消  

视图 

视图概览 

渲染视图的内容 

MVVM集成  

删除/销毁视图  

布局  

布局概览  

使用布局展示视图  

使用布局切换视图  

 概览

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

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

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

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


 

<div id="app"></div>

 

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

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

</script>

 

<script>

var index = new kendo.View(

"index", // the id of the script element that contains the view markup

{ model: kendo.observable({ foo: "World!" }) }

);

 

var router = new kendo.Router();

 

router.route("/", function() {

index.render("#app");

});

 

$(function() {

router.start();

});

</script>

 

 

路由

 

 

路由概览

 

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

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

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


 

<script>

var router = new kendo.Router();

 

router.route("/", function() {

console.log("/ url was loaded");

});

 

$(function() {

router.start();

});

</script>

 

 

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

 

参数

 

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

参数解析


 

 

<script>

var router = new kendo.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");

});

</script>

 

 

 

可选参数


 

<script>

var router = new kendo.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");

 

// ...

router.navigate("/items");

 

// ...

router.navigate("/items/books");

});

</script>

 

 

路由通配符


 

<script>

var router = new kendo.Router();

 

router.route("/items/*suffix", function(suffix) {

console.log(suffix);

});

 

$(function() {

router.start();

 

// ...

router.navigate("/items/books/59");

 

// ...

router.navigate("/items");

 

// ...

router.navigate("/items/books");

});

</script>

 

 

 

导航

 

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

路由导航


 

<a href="#/foo">Foo</a>

 

<script>

var router = new kendo.Router();

 

router.route("/foo", function() {

console.log("welcome to foo");

});

 

$(function() {

router.start();

router.navigate("/foo");

});

</script>

 

 

 

路由缺失与导航取消

 

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

处理路由缺失


 

<script>

var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } });

 

$(function() {

router.start();

router.navigate("/foo");

});

</script>

 

 

 

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

路由的取消


 

<script>

var router = new kendo.Router({

change: function(e) {

console.log(url);

e.preventDefault();

}

});

 

$(function() {

router.start();

router.navigate("/foo");

});

</script>

 

 

 

 

视图

 

 

视图概览

 

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

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


 

<script>

var index = new kendo.View('<span>Hello World!</span>');

</script>

 

 

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


 

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

<span>Hello World!</span>

</script>

 

<script>

var index = new kendo.View('index');

</script>

 

 

 

渲染视图的内容

 

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

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

将视图内容渲染到容器中


 

<div id="app"></div>

 

<script>

var index = new kendo.View('<span>Hello World!</span>');

 

index.render("#app");

</script>

 

 

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

附加视图内容


 

<div id="app"></div>

 

<script>

var index = new kendo.View('<span>Hello World!</span>');

 

$("#app").append(index.render());

</script>

 

 

MVVM集成

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

MVVM绑定的视图


 

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

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

</script>

 

<script>

var model = kendo.observable({foo: "World"});

var index = new kendo.View('index', {model: model});

</script>

 

 

删除/销毁视图

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

 

  

 

 

布局

布局概览

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

使用布局展示视图

使用布局展示视图


 

<div id="app"></div>

 

<script>

var view = new kendo.View("<span>Foo</span>");

 

var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

 

layout.render($("#app"));

 

layout.showIn("#content", view);

</script>

 

 

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

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

使用布局切换视图

使用布局切换视图


 

<div id="app"></div>

 

<script>

var foo = new kendo.View("<span>Foo</span>", { hide: function() { console.log("Foo is hidden now"); });

var bar = new kendo.View("<span>Bar</span>");

 

var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

 

layout.render($("#app"));

 

layout.showIn("#content", foo);

layout.showIn("#content", bar);

</script>

 

时间: 2024-10-08 09:33:35

Kendo UI SPA文档的相关文章

有一个问题我一直很疑惑,一个软件系统是先有文档呢还是先有代码呢,一个UI前台界面是先写js呢还是先写css呢?

问题描述 有一个问题我一直很疑惑,一个软件系统是先有文档呢还是先有代码呢,一个UI前台界面是先写js呢还是先写css呢? 解决方案 一个软件系统是先有文档呢还是先有代码呢?应该是现有文档.这里文档的概念太宽泛,应该说明的是什么文档,细化到什么程度的文档.我们再撸起袖子准备开发一个软件系统的时候,首先得知道的是要开发什么(需求文档),怎么开发(设计文档).注意的是,这里并一定非得把需求文档写的多么细致,考虑每个业务分支逻辑,也不需要将设计文档细化到某个模块的时序图是怎么样的,逻辑判断是怎么样的.因

Android Auto开发者文档显示UI和第三方应用更多细节

Android Auto开发者文档显示UI和第三方应用更多细节近日谷歌在Android开发者网站公开了关于Android Auto的一系列开发文档,展示谷歌车载平台的诸多细节并赋予了开发者改善系统的特权.Android Auto的"应用"并非真的应用程序,就是在现有Android应用的基础上增加额外Android Auto特定代码,使其能够在车上正常运行,所以开发者完全不需要独立开发手机.手表或是车载应用,在开发阶段完全采用常规方式开发,但通过不同的接口属 性来应对不同平台.开发者并不

Android官方入门文档[17]构建灵活的UI

Android官方入门文档[17]构建灵活的UI Building a Flexible UI构建灵活的UI   This lesson teaches you to1.Add a Fragment to an Activity at Runtime2.Replace One Fragment with Another You should also read•Fragments•Supporting Tablets and Handsets这节课教你1.在运行时新增一个片段给一个活动2.用另一

环信3.1版本的UI怎么集成到项目里面啊,已经把EaseUI文件导进来了,但是却一直报错,文档上没有写清楚,跟2.0版本不同,之前的很快就弄好了,这次的版本一直出错

问题描述 解决方案 报什么错,贴出来看看解决方案二:3.1版本的集成有视频吗,已经按文档上的步骤走了,集成环信UI一大堆错,老报文件找不到.解决方案三: 解决方案四:报错的这两句头文件代码注释解决方案五:你先用CocoaPods导入最新的 EaseMobSDKFull,再下载最新的Demo,之后还不会可以联系我!

好的产品需求文档(PRD)怎么写?

PRD(Product Requirement Document,产品需求文档),顾名思义是阐述产品需求的一种文档,其核心是将需求描述清楚. 通过PRD可以看出一个产品经理对产品理解的逻辑思维,产品经理在相关领域的认知和专业的深度以及对产品全局的认识.如何才能写出好的PRD,让产品研发团队成员,开发.测试.运营同学了解产品需求,让其他人能从该文档中看到产品的价值和意义,估计很多人都思考过,如何让PRD不被其他人挑战,如何获得他们的认可估计是产品经理经常考虑的问题.也有人可能认为PRD只要中心思想

Android 4.0的设计指南文档全介绍

冰淇淋三明治(Android 4.0)标志着Android设计的一个重要里程碑.我们设计了几乎系统内的每个像素,扩展了蜂巢平板中的设计方式,并应用到所有的移动设备.从最基本的 元素开始,我们引进了新的Roboto字体,并为高分辨率的显示设备增强了设计.其它大的变化,还包括系统框架层级操作栏和支持没有物理按键的新设备. 我们在三个主要目标上专注于核心应用程序和整个系统的的设计工作.当你为Android平台设计应用程序时,请考虑这些目标: 文档全介绍-生存指南汉化补丁4.0"> 使人沉浸 美不

.Net中将图片数据保存到XML文档

xml|数据 因为最近要做的项目中,我要通过XML动态生成窗体,看了UI图样,我有些叫苦:我通过XML动态生成窗体,可是主窗体中UI要用图标来确定要使用的窗体,怎么才能使主窗体的图标也是动态加载而且图标和要生成的窗体还有关联呢?我又想到用XML,查MSDN,看到只有XmlTextWriter和XmlTextReader里分别有XmlTextWriter.WriteBase64和XmlTextReader.ReadBase64可以操作图片这种二进制字节的数据.但是XmlTextWriter和Xml

用户界面设计文档:手指友好型设计

文章描述:手指友好型设计-为了更好的点击而设计. 玩飞镖的时候,靶心是最难射中的位置,因为靶心是整个靶面上面积最小的部分.越是小的目标,就越是难以达到.这个准则在移动设备的触摸屏幕上同样适用. 众所周知,对于触屏设备用户来说,面积小的目标比面积大的目标更难操纵.所以,在设计移动设备界面的时候,触控目标一定要充分的大,足以让用户操作自如.但是多大才算充分呢?多大才是对于大多数用户最合适的尺寸呢?各大移动设备开发者已经认识到这个问题,最常见的做法是在各大厂商的用户界面设计文档中寻找答案. 那么,设计

ASP.NET技巧:根据xsd生成xml文档

asp.net|xml|技巧|生成xml 现在有很多的xml工具软件都能根据xsd文件书写出xml文档,.net 没有实现此方法,如是我写了几个浏览.校验.和创建xml的方法全部代码如下: using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;us