Kendo UI SPA文档Word文件下载.docx
- 文档编号:15905582
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:13
- 大小:134.37KB
Kendo UI SPA文档Word文件下载.docx
《Kendo UI SPA文档Word文件下载.docx》由会员分享,可在线阅读,更多相关《Kendo UI SPA文档Word文件下载.docx(13页珍藏版)》请在冰豆网上搜索。
>
/div>
script
index"
type="
text/x-kendo-template"
Hello
spandata-bind="
text:
foo"
/span>
/script>
script>
var
index
=
new
kendo.View(
"
//theidofthescriptelementthatcontainstheviewmarkup
{
model:
kendo.observable({
foo:
World!
})
}
);
router
kendo.Router();
router.route("
/"
function()
{
index.render("
#app"
});
$(function()
router.start();
路由
路由概览
当使用路由机制在页面间切换时,会触发一个Change事件,适合用于权限验证。
带回调函数的一个路由演示,定位到根路由
console.log("
/urlwasloaded"
默认情况下,如果URL中关于页面的片段未指定,则根路由("
route)的回调函数会被触发执行。
init事件的处理器会忽略初始URL而执行。
参数
路由机制实现了大部分RubyonRails式的路由格式,包括支持路由绑定,可选参数项以及路由通配符。
从URL中解析出来的参数将会传递到路由的回调函数中去。
参数解析
/items/:
category/:
id"
function(category,
id)
console.log(category,
itemwith"
id,
wasrequested"
//...
router.navigate("
/items/books/59"
可选参数
/items(/:
category)(/:
id)"
/items"
/items/books"
路由通配符
/items/*suffix"
function(suffix)
console.log(suffix);
导航
导航方法可以用来将页面转至其他页面。
被指向的路由将会被触发。
导航操作将改变RUL中关于页面的部分。
点击超链接同样可以触发相关路由——一个带有href="
#/foo"
属性的连接将会触发'
/foo'
路由的回调函数。
路由导航
a
href="
Foo<
/a>
/foo"
welcometofoo"
路由缺失与导航取消
如果没有匹配的路由地址,则路由机制会触发routeMissing事件并把没找到的这个URL传到事件处理器中。
处理路由缺失
kendo.Router({
routeMissing:
function(e)
console.log(e.url)
}
每当URL中页面片段改变时,会触发一个change事件。
在其事件处理器中调用preventDefault会使RUL返回到变化前的状态。
路由的取消
kendo.Router({
change:
console.log(url);
e.preventDefault();
视图
视图概览
视图类实例化并处理程序中特定页面的事件。
视图的内容可能通过指定包含HTML的字符串来定义,也可以通过指定事件创建好的包含HTML标记的Script模板来定义,只需指定模板的Id即可。
默认情况下,视图的内容会用<
DIV>
标记来包装,你可以通过指定tagName来使用其他标记。
使用包含HTML的字符串来定义视图
kendo.View('
span>
HelloWorld!
'
使用包含HTML标记的Script模板来定义视图
index'
渲染视图的内容
视图的渲染是通过调用render方法实现的,该方法可以接收jQuery选择器(或者Object类型)的参数来指定内容将会显示在哪个地方。
另外,render方法在调用时也可以不指定参数,用来返回视图的内容,以便在其他场合手动地使用这些内容。
视图将会在它的render方法第一次被调用的时候对它的内容进行渲染。
如果视图内容是通过Script模板指定的,则这个模板需要在渲染前已经存在于HTML文档的DOM模型当中。
视图可以在路由的init事件中进行渲染,也可以在路由的路由回调函数当中进行。
将视图内容渲染到容器中
之后对视图render方法的调用都不会再次对视图内容进行渲染,而是返回已经存在的内容的引用,或者将内容放到指定的元素内,如果调用时指定了参数的话。
附加视图内容
$("
).append(index.render());
MVVM集成
如果一个可遍历对象被当作一个模型传入到一个视图的构造函数中,则视图在初始化后会被绑定到这个模型上。
如果没有提供模型,则视图的内容会使用数据属性初始化。
MVVM绑定的视图
div>
foo"
!
model
kendo.observable({foo:
World"
{model:
model});
删除/销毁视图
某些场合下,一个视图会被销毁以释放占用的浏览器资源。
当被销毁后,与该视图相关的DOM元素会被移除,与之关联的MVVM绑定也会消除。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Kendo UI SPA文档 SPA 文档