Kendo UI 单页面应用(二) Router 类
Kendo UI 单页面应用(二) Router 类
Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route 也支持通过代码在应用的不同状态之间切换。
Router 根路径回调函数
<script>
var router = new kendo.Router(); router.route("/", function() {
console.log("/ url was loaded");
}); $(function() {
router.start();
});
</script>
缺省情况下,如果 URL fragment 为空,将使用缺省的“/”的根路径,此时对于的回调函数被调用,不管初始 URL 是什么,这个初始化的回调函数总会调用。如果使用 IE,按 F12 可以打开 Developer Window,选择 Console 可以看到 console.log 的打印信息。
参数
Router 支持 bound parameters, optional segments, 和 route globbing,类似于绑定参数,可选参数,匹配符匹配参数等。例如:绑定参数
<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>
当运行这个页面时,注意地址栏中的地址为:
<http://localhost:53223/Index.html#/items/books/59 –> #/items/books/59>
可选参数
如果 URL 的部分参数为可选的,此时 Route 的规则为使用”()”,将可选参数放在括号内。
<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/accessories"); // ...
router.navigate("/items/books");
});
</script>
页面切换
navigation 方法可以用来切换应用,对应的路径的回调方法被调用, navigation 方法修改 URL 的 fragment 部分(#后面部分)。比如:
<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>
这个例子,将在地址栏显示 http://xxx/index.html#/foo。如果对应的路径不存在,Router 类触发 routeMissing 事件,并把 URL 作为参数传入。
<script>
var router = new kendo.Router({ routeMissing: function(e) { console.log(e.url) } }); $(function() {
router.start();
router.navigate("/foo");
});
</script>
你可以通过 change 事件来截获这种页面之间的切换,然后调用 preventDefault 阻止页面切换。
<script>
var router = new kendo.Router({
change: function(e) {
console.log(url);
e.preventDefault();
}
}); $(function() {
router.start();
router.navigate("/foo");
});
</script>
最新文章
- PyQt 自定义信号带参数
- tomcat监控
- Parallel.js初探续集
- 【转】谈谈Google Polymer以及Web UI框架的未来
- Spring第十一篇——–Spring整合Hibernate之配置数据源
- js对象3--工厂方法加深引出原型--杂志
- Unity3D开发Windows Store应用程序 注意事项
- jquery图片裁切+PHP文件上传
- JavaScript(十一) HTML DOM - 改变CSS
- SQL 中With as 的用法
- 给大家推荐一款代替Visio的在线作图工具ProcessOn
- mysql学习(五)-字段属性
- SQL执行效率总结
- Mac OS X安装之硬盘和光盘引导总结
- 如何在Eclipse下安装myeclipse插件
- Xp下麦克风设备及音量检测
- SpringMVC云题库错题及答案汇总-2
- Java中excel转换为jpg/png图片 采用aspose-cells-18.6.jar
- 批处理关闭防火墙.bat
- 『编程题全队』Beta 阶段冲刺博客五
热门文章
- AtCoder Grand Contest 010 C:Cleaning
- IHE-PIX 备注
- Python3解leetcode Same Tree
- JS---分解质因数
- JS---设置简易红绿灯
- Linux命令总结_文件的输入与 输出
- Oracle tns 协议
- unity coroutine
- AcDbSymbolTable of AcDbDatabase
- MCP|BFY|Proteome Analysis of Human Neutrophil Granulocytes From Patients With Monogenic Disease Using Data-independent Acquisition(单基因疾病患者中性粒细胞的DIA蛋白质组分析)