程序员经验分享-hwhale

Kendo UI开发教程(7): Kendo UI 模板概述

2023-10-27


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 <div id="example"></div>
2 <script>
3     var template = kendo.template("<div id='box'>#= firstName #</div>");
4     var data = { firstName: "Todd" }; //A value in JavaScript/JSON
5     var result = template(data); /Pass the data to the compiled template
6     $("#example").html(result); //display the result
7 </script>

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

显示HTML数据

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

1 var template = kendo.template("<div id='box'>#: firstName #</div>");

完整的示例如下：

1 <div id="example"></div>
2 <script>
3     var template = kendo.template("<div id='box'>#: firstName #</div>");
4     var data = { firstName: "<b>Todd</b>" }; //Data with HTML tags
5     var result = template(data); //Pass the data to the compiled template
6     $("#example").html(result); //display the resulting encoded HTML Output (<b>Todd</b>)
7 </script>

这个例子的显示结果为

1 <b>Todd </b>

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

使用外部模板和表达式

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

1 <script id="javascriptTemplate" type="text/x-kendo-template">
2 <ul>
3 # for (var i = 0; i < data.length; i++) { #
4     <li>#= data[i] #</li>
5 # } #
6 </ul>
7 </script>

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

1 <div id="example"></div>
2  
3 <script id="javascriptTemplate" type="text/x-kendo-template">
4     <ul>
5     # for (var i = 0; i < data.length; i++) { #
6         <li>#= data[i] #</li>
7     # } #
8     </ul>
9 </script>
10  
11 <script type="text/javascript">
12     //Get the external template definition using a jQuery selector
13     var template = kendo.template($("#javascriptTemplate").html());
14  
15     //Create some dummy data
16     var data = ["Todd", "Steve", "Burke"];
17  
18     var result = template(data); //Execute the template
19     $("#example").html(result); //Append the result
20 </script>

20130622001

可以看到模板执行了JavaScipt的for 循环，并且我们使用了外部模板，外部模板的定义使用type=”text/x-kendo-template”来定义，并通过其id来访问这个外表模板。
在模板中也可以定义变量，使用这个自定义变量的方法和使用字面量的方法类似。比如定义一个变量myCustomVariable

1 <script id="javascriptTemplate" type="text/x-kendo-template">
2     # var myCustomVariable = "foo"; #
3     <p>
4         #= myCustomVariable #
5     </p>
6 </script>

嵌入式模板 vs 外部模板

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

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

 

嵌入式模板使用比较简单的情况，对于比较复杂的模板一般使用外部模板。外部模板的定义的基本格式如下：

1 <script type="text/x-kendo-template" id="myTemplate">
2     <!--Template content here-->
3 </script>

外部模板必须定义一个id,这样你才可以通过id 来访问这个模板：

1 //extract the template content from script tag
2 var templateContent = $("#myTemplate").html();
3 //compile a template
4 var template = kendo.template(templateContent);

使用外部模板，你可以使用任意合法的HTML元素和JavaScirpt，只需语法正确，比如：

1 <ul id="users"></ul>
2  
3 <script type="text/x-kendo-template" id="myTemplate">
4     #if(isAdmin){#
5         <li>#: name # is Admin</li>
6     #}else{#
7         <li>#: name # is User</li>
8     #}#
9 </script>
10  
11 <script type="text/javascript">
12     var templateContent = $("#myTemplate").html();
13     var template = kendo.template(templateContent);
14  
15     //Create some dummy data
16     var data = [
17         { name: "John", isAdmin: false },
18         { name: "Alex", isAdmin: true }
19     ];
20  
21     var result = kendo.render(template, data); //render the template
22  
23     $("#users").html(result); //append the result to the page
24 </script>

20130622002

 
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Kendo 学习教程

Kendo UI开发教程(7): Kendo UI 模板概述 的相关文章

  • 通过Vue.js的axios请求WFS数据并处理请求回来的XML文件

    前端小白的第一个博客 前言 这个是在GIS开发过程中遇到的一个小问题 因为里面包含了蛮多的知识点 故将其记录 废话不多说进入正文 正文 此次需要解决的问题是通过wfs接口来获取到一些需要的内容 然后以这些内容为基础进行一系列的操作 以下展示

  • 1.3远程控制及文件传输

    我们经常用的是Windows操作系统 又经常需要与Ubuntu进行文件传输 同时为了能在Windows上操作我们的Ubuntu 这里推荐一个文件传输和一个远程控制的程序 文件传输WinSCP 官方下载地址 https sourceforge

  • VsCode官网快速下载

    VsCode官网 以Win10下载为例 问题描述 下载时 发现速度很慢 甚至会没有下载速度 如下图 解决方法 右键复制这个下载链接 将其前半部分修改为vscode cdn azure cn 例如 原下载链接 https az764295 v

  • Codeforces 600C Make Palindrome 【贪心 找字典序最小回文串】

    一 题目概述 C Make Palindrome time limit per test 2 seconds memory limit per test 256 megabytes input standard input

  • 如何在Anaconda安装opencv，下面分享一下教程

    1 首先下载opencv安装包 下载地址 https download csdn net download qq 42375391 12333992 2 安装完成后 在Anaconda Prompt内使用pip install完整路径文件名

  • 算法：模拟思想算法

    文章目录 实现原理 算法思路 典型例题 替换所有问号 提莫攻击 N字型变换 外观序列 总结 本篇总结的是模拟算法 实现原理 模拟算法的实现原理很简单 就是依据题意实现题意的目的即可 考察的是你能不能实现题目题意的代码能力 算法思路 没有很明

随机推荐

  • openwrt 自动签到插件-食用指南

    目录 openwrt 自动签到插件下载 openwrt 插件安装需要的依赖 openwrt 插件安装 文件上传 openwrt 自动签到配置 设置详情 Cookie获取失败 解决方法 Charles 抓包获取Cookie openwrt 配

  • 计算机设备问题代码43,双击unknown device由于该设备有问题Windows已将其停止(代码 43)怎么办解决教程...

    金士顿U盘做的启动盘 8G 在别人的电脑上储存文件正常 但在自己的电脑上无法识别 在设备管理器中显示黄色叹号 属性显示 该设备存在问 题 windows已将其停止 代码43 本机win7系统 别人电脑为XP系统 已将 禁用 注册表 dos设

  • Linux 阻塞IO（等待队列）原理及架构

    一 阻塞操作 阻塞操作是指在执行折本操作时 若不能获得自愿 则挂起进程直到满足可操作性的条件后在进行操作 被挂起的进程进入休眠状态 被从调度器的运行队列移走 直到等待的条件被满足 假设recvfrom函数是一个系统调用 阻塞不是低效率 如果

  • vue -- 验证码

  • 25-python函数（低阶）

    一 函数的作用 函数的本质就是将一段具有独立功能的代码块整合到一个整体并命名 在需要的时候通过调用函数名完成某种需求 以提高代码的利用率 从而在稳定系统的同时减轻程序员的工作 二 函数的使用过程 函数使用分为两个步骤 先定义 后调用 定义函

  • Java设计模式之状态模式

    本文继续介绍23种设计模式系列之策略模式 何时使用 State模式在实际使用中比较多 适合 状态 的切换 因为我们经常会使用If else if else 进行状态切换 如果针对状态的这样判断切换反复出现 我们就要联想到是否可以采取Stat

  • Android相机-架构3

    目录 引言 1 Android相机的整体架构 2 相机 HAL 2 1 AIDL相机HAL 2 2 相机 HAL3 功能 3 HAL子系统 3 1 请求 3 2 HAL和相机子系统 3 2 1 相机的管道 3 2 2 使用 Android

  • TCP的拥塞控制（详解）

    在某段时间 若对网络中某一资源的需求超过了该资源所能提供的可用部分 网络性能就要变坏 这种情况就叫做网络拥塞 在计算机网络中数位链路容量 即带宽 交换结点中的缓存和处理机等 都是网络的资源 若出现拥塞而不进行控制 整个网络的吞吐量将随输入负

  • 【6 GoldenEye渗透笔记】

    1 前言 本文仅用于技术讨论与研究 不做任何导向 对于所有笔记中复现的这些终端 服务器或者实验环境 均为自行搭建的公开靶场 请勿在现实环境中模仿 操作 本文涉及到的工具仅就用到的方面做简要描述 如果想了解更详细的信息 请自行参阅其他技术资料

  • Java的多态性

    Java的多态性多态性严格来讲有两种描述形式 一 方法的多态性 1 方法的重载 同一个方法名称 会根据传入参数的类型及个数不同执行不同的方法体 2 方法的覆写 同一个方法名称 会根据子类的不同 实现不同的功能 二 对象的多态性 指的是发生在

  • 51Nod 2094 前缀和

    题目链接 https www 51nod com Challenge Problem html problemId 2094 include

  • unity3D简答题2

    游戏对象运动的本质 游戏对象运动的本质是对象Transform属性的变化 position决定位置 rotation决定旋转角度 请用三种方法以上方法 实现物体的抛物线运动 如 修改Transform属性 使用向量Vector3的方法 第一

  • canvas drawbitmap不出现_用Flutter做桌上弹球？聊聊绘图（Canvas&CustomPaint）API

    本文是Flutter中Canvas和CustomPaint API的使用实例 首先看一下列出最终目标 在程序运行后 显示一个小球 每次程序启动后 小球的样式均发生随机性变化 体现在大小 颜色和位置三点 小球运行的规律参考桌球或三维弹球游戏

  • Convolutional Pose Machine - 卷积姿态网络

    Convolutional Pose Machine 卷积姿态网络 论文主要解决 单人单目 RGB图像姿态估计问题 本篇论文也是现在非常火热的openpose开源项目的核心之一 这篇来自CMU的论文为单人姿态估计方面研究注入新的思路 论文网

  • Flutter初体验

    背景 今天在 lt 极客 gt APP上看到一个 使用Flutter快速构建集美观与高性能于一体的移动应用 的介绍 瞬间想试试 于是找到了Flutter官网 https flutter cn 并按步骤实操起来 手册 安装和环境配置 Flut

  • Docker部署单机Zookeeper

    配置Zookeeper安装目录 在宿主机配置zookeeper安装目录 docker develop zookeeper 并且在文件夹创建 data 和logs 目录 mkdir p docker develop zookeeper dat

  • 运行paddle-gpu相关项目报错

    报错1 RuntimeError PreconditionNotMet Cannot load cudnn shared library Cannot invoke method cudnnGetVersion Hint cudnn dso

  • JS 对象 Key使用变量代替

    JS 对象 Key使用变量代替 let key aa let data key value 普通 的对象类型数据中 直接用变量名填写key 最后 key会变成变成变量名的字符串 let data key value 使用中括号 以后 就会将

  • 实现点击img图片标签触发上传文件input按钮

    点击图片上传文件 简单有效 在网上找的一些文章都是A抄B B抄C 还都没啥用 自己蠢了 其实很简单 记录一下 Html 代码 div style width 30 margin left 3 height 1 img src images

  • Kendo UI开发教程(7): Kendo UI 模板概述

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

热门标签