Kendo UI开发教程:Kendo UI模板概述

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎。通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素。Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便。

模板语法

Kendo模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代。

用三种方式使用#语法:

  1. 显示字面量 #=#
  2. 显示HTML元素 #:#
  3. 执行任意的Javascript代码  #if() {# ?#}#

注意:如何你的模板中包含有“#”字符,不是用来绑定的部分,你必须使用转义字符,否则会引起模板编译错误。 你可以通过“\\#?转义需要显示“#”的地方。

显示原始数据

显示数据的本来的形式是使用模板的一个最基本的用法,使用Kendo UI模板,可以使用如下类似的代码:

1

var template = kendo.template(“<div id="’box’">#= firstName #</div>”)

上面代码创建了“编译”过的嵌入式模板,使用这个模板可以用来显示数据,比如下面的代码:

1

2

3

4

5

6

7

<div id="“example”"></div>

<script>

var template = kendo.template(“<div id=’box’>#= firstName #</div>”);

var data = { firstName: “Todd” }; //A value in JavaScript/JSON

var result = template(data); /Pass the data to the compiled template

$(“#example”).html(result); //display the result

</script>

通过模板与数据的合并,最终显示“Todd”。

显示HTML数据

如果你需要显示经过HTML编码过的数据,使用Kendo UI模板可以自动处理这些编码过的HTML元素,但需要使用不同的语法 #: ?#,例如:

1

var template = kendo.template(“<div id="’box’">#: firstName #</div>”);

完整的示例如下:

1

2

3

4

5

6

7

<div id="“example”"></div>

<script>

var template = kendo.template(“<div id=’box’>#: firstName #</div>”);

var data = { firstName: “<b>Todd</b>” }; //Data with HTML tags

var result = template(data); //Pass the data to the compiled template

$(“#example”).html(result); //display the resulting encoded HTML Output (<b>Todd</b>)

</script>

这个例子的显示结果为:

1

<b>Todd </b>

而不是 Todd,如果需要显示Todd ,则需要使用#= # 语法,显示HTML编码的一个主要作用是当你无需再模板中显示HTML标记,而是把整个标记和其内容作为字符串显示出来。

使用外部模板和表达式

在模板中也可以使用表达式,Kendo UI 支持者模板中执行JavaScript代码,在模板中使用JavaScript代码的方法是在JavaScript语句的前后加上#,比如下面模板显示一组列表:

1

2

3

4

5

6

7

<script id="“javascriptTemplate”" type="“text/x-kendo-template”">

<ul>

# for (var i = 0; i < data.length; i++) { #

<li>#= data[i] #</li>

# } #

</ul>

</script>

然后为了使用这个模板,可以通过模板的id ,通过kendo.template 创建这个模板,然后和数据合并,比如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id="“example”"></div>

 

<script id="“javascriptTemplate”" type="“text/x-kendo-template”">

<ul>

# for (var i = 0; i < data.length; i++) { #

<li>#= data[i] #</li>

# } #

</ul>

</script>

 

<script type="“text/javascript”">

//Get the external template definition using a jQuery selector

var template = kendo.template($(“#javascriptTemplate”).html());

 

//Create some dummy data

var data = [“Todd”, “Steve”, “Burke”];

 

var result = template(data); //Execute the template

$(“#example”).html(result); //Append the result

</script>

可以看到模板执行了JavaScipt的for 循环,并且我们使用了外部模板,外部模板的定义使用type=?text/x-kendo-template?来定义,并通过其id来访问这个外表模板。

在模板中也可以定义变量,使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量myCustomVariable:

1

2

3

4

5

6

<script id="“javascriptTemplate”" type="“text/x-kendo-template”">

# var myCustomVariable = “foo”; #

<p>

#= myCustomVariable #

</p>

</script>

嵌入式模板 vs 外部模板

Kendo UI 模板可以使用嵌入式模板和外部模板:

  • inline: 使用JavaScript字符串定义
  • external: 使用HTML Script块定义

本文转载自Kendo UI中文网

转载于:https://my.oschina.net/u/2317468/blog/785986

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS_13原型与原型链

原型与原型链 原型 每一个函数都有一个属性&#xff1a;prototype,默认指向object空对象&#xff0c;就是原型对象,原型对象有一个constructor属性&#xff0c;指向函数对象每一个实例化对象都有一个属性 proto ,默认指向构造函数的原型对象&#xff08;是构造函数原型对象的…

ajax数据保存及解析

1. $(#frmCam).serialize()&#xff1b;serialize() 方法通过序列化表单值&#xff0c;创建 URL 编码文本字符串。 2.自动对应ID和值 window.camConfig [<%(camConfig) %>]; if (camConfig.length>0) { for(var property in cam…

python和revit_pyRevit系列教程1

有没有人和我一样&#xff0c;想要自己写一些小功能来用(zhuang)用(bi)&#xff0c;但苦于C#太难学了&#xff0c;不得不作罢。话说感受过Python的美好&#xff0c;怎么能忍受C#的大括号&#xff01;毕竟人生苦短&#xff0c;我用Python&#xff01;好吧&#xff0c;我承认是我…

【leetcode】104. Maximum Depth of Binary Tree

1. 题目 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node. 2. 思路 递归到左、右子树的max值&#xff0c;1. 3. 代码 /*** Definition for a binary tree …

JS_14 执行上下文与执行上下文栈

执行上下文和执行上下文栈 变量提升和函数提升 变量提升 所用使用var定义的变量&#xff0c;在程序运行前会被先定义&#xff0c;并赋初值为underfind&#xff0c;保存到其执行上下文中 函数提升 在调用函数&#xff0c;执行函数体之前&#xff0c;会先执行函数定义&#xff…

shell编程-变量

1.Bash用户自定义变量 【局部变量】 【按数据存储分类】&#xff1a;整型、浮点型、字符串型、日期型 【变量定义】&#xff1a;x5,y6,z$x$y56,m$(($x$y))11 【Bash变量默认都为字符串型&#xff0c;等号左右不可以有空格】 【变量叠加】&#xff1a;x"$x"123,x${x}3…

JS_15作用域与作用域链

作用域与作用域链 作用域 类别 全局作用域函数作用域块作用域&#xff1a;Es6时出现&#xff0c;之前没有 作用域与执行上下文 区别 创建时机不同 全局作用域外&#xff0c;每个函数都有自己的作用域&#xff0c;作用域在函数创建时就创建了&#xff0c;而不是在调用时全局执…

多线程调用同一个对象的方法_多线程之如何创建和使用线程

一、创建线程和使用线程方式1.1 继承Thread让线程类继承自Thread类&#xff0c;然后重写run()&#xff0c;把需要多线程调用的代码放到run()中。但是需要开启线程的时候不能调用run方法&#xff0c;而是需要调用start()方法。/*** 本类用于演示第一种实现多线程的方式*/ class…

struts2的namespace的问题

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <inc…

JS_16闭包

闭包 什么是闭包 理解1&#xff1a;闭包是嵌套的内部函数理解2&#xff1a;闭包是包含被引用变量&#xff08;函数&#xff09;的对象 闭包产生的条件 函数嵌套子函数调用了父函数的数据父函数被调用了&#xff08;子函数不一定需要被调用&#xff0c;只需要执行函数定义即可&…

[Intel Edison开发板] 02、Edison开发板入门

一、前言 Start from the link: 开始学习的链接 上面链接是官网的教程&#xff0c;按照教程可以开发板入门&#xff1a; 其中第一步是了解开发板&#xff0c;涉及到如何组装、如何连线、一些主要的接口简单介绍等信息&#xff1b;第二步主要是介绍如何用官方提供的工具进行配置…

python apscheduler一次只有一个job_Python使用APScheduler实现定时任务过程解析

前言APScheduler是基于Quartz的一个Python定时任务框架。提供了基于日期、固定时间间隔以及crontab类型的任务&#xff0c;并且可以持久化任务。一、安装APSchedulerpip install apscheduler二、基本概念APScheduler有四大组件&#xff1a;1、触发器 triggers &#xff1a;触发…

java web service简单示例

http://www.iteye.com/topic/1135747 转载于:https://www.cnblogs.com/fycct/p/5669420.html

shell统计指定目录下所有文件类型及数量

#!/bin/bash#Synopsis:用于统计脚本当前所在目录或者用户指定目录下的所有文件类型及数量#若直接运行脚本而不接任何命令行参数,则默认会统计脚本所在目录下的文件#Date:2016/10#Author:Jian#Usage:sh fileStat.sh /path1 /path2testFile$(mktemp /tmp/testfile.XXX)#如果没有指…

python cross val score_sklearn函数:cross_val_score(交叉验证评分)

sklearn.model_selection.cross_val_score(estimator,X,yNone,*,groupsNone,scoringNone,cvNone,n_jobsNone,verbose0,fit_paramsNone,pre_dispatch2*n_jobs,error_scorenan)前面我们提到了4种分割数据集的方法&#xff0c;在分割完数据集后&#xff0c;我们训练模型&#xff0…

JS_17 ES5,ES6

ES5 严格模式 定义方法 use strict特性&#xff1a; 必须使用var定义变量存在eval作用域禁止自定义函数中的this指向window对象不能有重名属性 JSON对象 json.stringify(obj/arr):js对象转换为json对象json.parse(str):json对象转换为js对象 Object拓展 Object.create(p…

几种纯css布局的导航栏

1.垂直导航栏 页面效果 <ul class"nav"><li><a href"home.htm">Home</a></li><li><a href"about.htm">About</a></li><li><a href"services.htm">Services</a&…

python中函数的参数传递(传值还是传引用)

函数的参数传递 函数参数传递有两种方式&#xff0c;传值和传引用&#xff0c;传值只是把变量的值复制一份给了实参&#xff0c;函数内部的操作不会改变函数外部变量的值&#xff0c;而传引用传递的是外部变量的地址&#xff0c;函数内部直接操作函数外部变量的储存空间&#…

poi获取有效单元格个数_EXCEL利用SUM函数和FREQUENCY函数数组公式统计不同区间数据个数...

EXCEL函数公式大全之利用FREQUENCY函数数组公式统计不同区间数据个数。EXCEL函数与公式在工作中使用非常的频繁&#xff0c;会不会使用公式直接决定了我们的工作效率&#xff0c;今天我们来学习一下提高我们工作效率的函数FREQUENCY函数和数组公式。今天我们的例子是统计学生在…

windows安装rsync

客户端&#xff1a;cwRsync 4.0.5 Installer服务端&#xff1a;cwRsyncServer 4.0.5 Installer 安装配置Rsync服务端 1.直接双击安装包安装即可&#xff0c;在安装过程中会有要求用户输入账户密码或者使用默认。此账户是rsync服务运行的用户。 2.安装完成之后&#xff0c;进入程…