Kendo UI单页面程序中文文档
Kendo UI SPA Documentation（translated from the official site）
概览
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>
|
