Kendo UI开发教程:Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>>
Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。
模板语法
Kendo模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代。
用三种方式使用#语法:
- 显示字面量 #=#
- 显示HTML元素 #:#
- 执行任意的Javascript代码 #if() {# ?#}#
注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#?转义需要显示“#”的地方。
显示原始数据
显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:
1 |
|
上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码:
1 2 3 4 5 6 7 |
|
通过模板与数据的合并,最终显示“Todd”。
显示HTML数据
如果你需要显示经过HTML编码过的数据,使用Kendo UI模板可以自动处理这些编码过的HTML元素,但需要使用不同的语法 #: ?#,例如:
1 |
|
完整的示例如下:
1 2 3 4 5 6 7 |
|
这个例子的显示结果为:
1 |
|
而不是 Todd,如果需要显示Todd ,则需要使用#= # 语法,显示HTML编码的一个主要作用是当你无需再模板中显示HTML标记,而是把整个标记和其内容作为字符串显示出来。
使用外部模板和表达式
在模板中也可以使用表达式,Kendo UI 支持者模板中执行JavaScript代码,在模板中使用JavaScript代码的方法是在JavaScript语句的前后加上#,比如下面模板显示一组列表:
1 2 3 4 5 6 7 |
|
然后为了使用这个模板,可以通过模板的id ,通过kendo.template 创建这个模板,然后和数据合并,比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
可以看到模板执行了JavaScipt的for 循环,并且我们使用了外部模板,外部模板的定义使用type=?text/x-kendo-template?来定义,并通过其id来访问这个外表模板。
在模板中也可以定义变量,使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量myCustomVariable:
1 2 3 4 5 6 |
|
嵌入式模板 vs 外部模板
Kendo UI 模板可以使用嵌入式模板和外部模板:
- inline: 使用JavaScript字符串定义
- external: 使用HTML Script块定义
本文转载自Kendo UI中文网
转载于:https://my.oschina.net/u/2317468/blog/785986
Kendo UI开发教程:Kendo UI模板概述相关推荐
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Django 3.2.5博客开发教程:体验django模板
上面我们有说过,用户发送请求的时候,视图会返回一个响应,响应可以是一个重定向,一个404错误,一个XML文档,一张图片或者是一个HTML内容的网页.前面几个返回的信息比较有限,我们重点更多是放在HTM ...
- Kendo UI开发教程(23): 单页面应用(一)概述
Kendo单页面应用(Single-Page Application,缩写为SPA)定义了一组类用于简化Web应用(Rich Client)开发,最常见的单页面应用为Gmail应用,使用单页面可以给用 ...
- Kendo UI开发教程 2 准备Kendo UI开发环境
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 首先你需 ...
- Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
- Kendo UI开发教程(25): 单页面应用(三) View
View为屏幕上某个可视部分,可以处理用户事件. View可以通过HTML创建或是通过script元素.缺省情况下View将其所包含的内容封装在一个Div元素中. Kendo创建View有两种方式: ...
- Yii Framework 开发教程(22) UI 组件 Zii组件简介
前面介绍了Yii框架支持的部分UI组件,除了前面介绍的UI组件外,Yii框架还提供了Zii组件库,包括列表视图ListView,表格视图GridView,此外还包括一些基于JQuery的UI组件 ...
- WPF UI开发教程LinkButton链接按钮
开发应用软件也需要像网页,加个超链接样式按钮.和网页需求一样需要把按钮字体颜色变蓝色,加上下划线,鼠标放上变成手型就行啦. 直接上按钮样式代码,需要加更多依赖属性可以修改到样式. <Style ...
- 火山PC餐饮界面UI开发教程
前言: 所有图层为PNG,方便二次修改 一.配置模块 右键配置,勾选"火山模块" 二.布局器设计 ①控制区布局 ②选择区布局 ③功能区布局 ④结算布局 ⑤房间布局 三.主窗口布局 ...
最新文章
- ORM单表查询,跨表查询,分组查询
- 怎么用php制作会员注册表单,帝国CMS前台会员登陆表单的制作教程
- CTF-Web-常用伪协议用法:
- 程序员基本功05表达式中的陷阱
- IntelliJ如何设置自动导包
- log函数 oracle power_Excel之数学函数SQRT/MOD/EXP/LN/RAND
- 图像处理十:图像反色
- 三极管开关为什么工作在饱和区和截至区
- 移动硬盘启动win7蓝屏7b_win7启动蓝屏0X0000007B代码的解决方法
- 笔记本打印时出现打印机出现异常配置问题_笔记本电脑连接共享打印机出现错误怎么办...
- matlab数细胞实验图片,献给初学者:手把手教你做细胞计数实验
- 利用Python3实现:非常“实用”的身高计算器(源代码)
- 各大主流BBS论坛程序简介
- 海量工业数据如何应用?能源企业率先做了这些尝试
- 算法基础(2) | 高精度、前缀和、差分
- ZIGBEE------协调器断开重连,终端设备无法重新入网。
- Linux操作系统--文本编辑器(保姆级教程)
- 基于FPGA的单目内窥镜定位系统设计(中)
- 闲鱼自动刷新最新发布页面源码
- Netty核心功能与线程模型精讲
热门文章
- java io加速器,Java 日期操作
- Pandas数据排序——【按索引排序sort_index()方法、按值排序sort_value()方法】
- C++:20---成员变量初始化方式
- 在Windows下安装JDK的通常步骤
- STL源码剖析 heap堆结构
- Java基础——Java NIO详解(一)
- A饭福利,AMD Mantle API获众多游戏开发商青睐!
- 编译器vs.代码 谁之过
- Dubbo + RestEasy 实现文件上传与下载
- 超方便、最简单版本:java 邮件发送 (半分钟写完代码)