Kendo 单页面应用(一)概述

Kendo 单页面应用(Single-Page Application,缩写为 SPA)定义了一组类用于简化 Web 应用(Rich Client)开发,最常见的单页面应用为  Gmail 应用,使用单页面可以给用户有使用桌面应用的用户体验。Kendo 的 Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换。 Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一起。从而可以支持把应用的某个状态作为书签添加到浏览器中。Route 也支持通过代码在应用的不同状态之间切换。View 和 Layout 类用于 UI 的显示。 UI 事件和数据绑定可以通过 MVVM 或 data 初始化属性来完成。下面为一个最简单的 SPA 应用框架。

<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>

运行这个应用,显示“Hello,World”。

Kendo 单页面应用(一)概述的更多相关文章

  1. Kendo UI开发教程(23): 单页面应用(一)概述

    Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...

  2. Kendo UI 单页面应用(四) Layout

    Kendo UI 单页面应用(四) Layout Layout 继承自 View,可以用来包含其它的 View 或是 Layout.下面例子使用 Layout 来显示一个 View <div i ...

  3. Kendo UI 单页面应用(三) View

    Kendo UI 单页面应用(三) View view 为屏幕上某个可视部分,可以处理用户事件. View 可以通过 HTML 创建或是通过 script 元素.缺省情况下 View 将其所包含的内容 ...

  4. Kendo UI 单页面应用(二) Router 类

    Kendo UI 单页面应用(二) Router 类 Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一 ...

  5. fsLayuiPlugin单页面操作

    概述 单页面处理新增.修改.查看详情 共用同一个弹出的页面.在线demo数据表格2 使用 提供2种处理方式(主要区别区弹出窗口的html配置),根据实际情况选择使用那种方式. 新增.修改功能共用一个按 ...

  6. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  7. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  8. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  9. AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

随机推荐

  1. 把myeclipse中的web项目导入eclipse中不能编程web项目的解决办法

    title: 把myeclipse中的web项目导入eclipse中不能编程web项目的解决办法 tags: grammar_cjkRuby: true --- 右键单击项目,properties-- ...

  2. LINUX socket网络编程

    1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 U ...

  3. Hbase之三:Hbase Shell使用入门

    HBase 为用户提供了一个非常方便的使用方式, 我们称之为“HBase Shell”.HBase Shell 提供了大多数的 HBase 命令, 通过 HBase Shell 用户可以方便地创建.删 ...

  4. session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli

    基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...

  5. Redux API之applyMiddleware

    applyMiddleware(...middlewares) 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式.Middleware 可以让你包装 store 的di ...

  6. CodeForces 1097G. Vladislav and a Great Legend

    题目简述:给定$n \leq 10^5$个节点的树$T = (V, E)$,令$X \subseteq V$表示一个非空节点集合,定义$f(X)$为包含$X$的最小子树的边数.求 $$ \sum_{\ ...

  7. Struts2+JQuery+Json登陆实例

    Struts2+JQuery+Json登陆实例 博客分类: Struts2   在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...

  8. 《SpringBoot揭秘 快速构建微服务体系》读后感(一)

    SpringIOC IOC有两种方式:一种是DI,另一种是DL,即Dependency Lookup(依赖查找).前者是当前软件实体被动接受其依赖的其他组件被IoC容器注入,而后者则是当前软件实体主动 ...

  9. zoj3826 Hierarchical Notation (字符串模拟)

    Hierarchical Notation Time Limit: 2 Seconds      Memory Limit: 131072 KB In Marjar University, stude ...

  10. hdu4886 TIANKENG’s restaurant(Ⅱ) (trie树或者模拟进制)

    TIANKENG’s restaurant(Ⅱ) Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 130107/65536 K (Ja ...