KendoUI模板引擎 - #号语法

KendoUI的模板引擎使用的语法叫做"#号语法（Hash Syntax）"，主要用来完成两件事情：渲染数据和执行JS表达式。

从JS对象渲染数据到HTML模板

使用等号渲染原始值 #= val #
使用冒号渲染HTML编码值 #: val #
两者的区别主要在于当数据值中包含HTML标签时，冒号方式会对值里的HTML标签进行转义，从而可以把标签作为字符串直接输出。

//uses #= #
var myTemplateRaw = kendo.template("<p>#= name #</p>");
var newHTMLRaw = myTemplateRaw({name:"<strong>Neo</strong>"});
console.log(newHTMLRaw); //<p><strong>Neo</strong></p>
$("#container").append(newHTMLRaw);//uses #: #
var myTempalteHTMLEncoded = kendo.template("<p>#: name #</p>");
var newHTMLEncoded = myTempalteHTMLEncoded({name:"<strong>Shelly</strong>"});
console.log(newHTMLEncoded); //<p>&lt;strong&gt;Shelly&lt;/strong&gt;</p>
$("#container").append(newHTMLEncoded);

页面效果：

执行JS表达式 # expression

示例1

<script type="text/x-kendo-template"><ul># for (var i = 0; i < data.length; i++) { #<li>#= data[i] #</li># } #<ul>
</script>

示例2

var template = "#if(foo) {# #= foo # is true #}#";

示例3

<script type="text/x-kendo-template">#if(isAdmin){#<li>#: name # is Admin</li>#}else{#<li>#: name # is User</li>#}#
</script>

无论是在行内模板中，还是在外部模板中，都可以使用JS变量和表达式。

KendoUI模板引擎 - #号语法相关推荐

KendoUI模板引擎 - 概述
基本用法 KendoUI模板引擎融合了包含"#号语法"(Hash Syntax, e.g. #= javascript property #) 的HTML和JS对象/数组,产生新的 ...
velocity模板引擎-vm语法整理
velocity模板引擎-vm语法整理模板引擎我目前接触过两次, 第一次是在前后端还未分离时,考虑到部分页面数据比较固定,一定时间内不会变动,这样每次从后台加载数据渲染页面明显会消耗性能以及资源浪费 ...
JAVA模板引擎velocity语法讲解
Velocity 是一个基于 Java 的模板引擎,它允许用户使用简单的模板语言来引用由 Java 代码定义的对象.当 Velocity 应用于 Web 开发时,界面设计人员可以和 Java 程序开发 ...
模板引擎 Thymeleaf 语法
模板引擎 Thymeleaf 1. Thymeleaf 简介 Thymeleaf[taɪm lif],百里香叶,是一个流行的模板引擎,该模板引擎采用 Java 语言开发.Java 中常见的模板引擎有 ...
nunjucks 模板引擎常用语法学习总结
文章目录 nunjucks模板引擎 nunjucks模板注释 koa-nunjucks-2的使用 nunjucks 插值语法 nunjucks 的判断语句 nunjucks 的循环语句 nunjuck ...
KendoUI模板引擎 - 结合组件使用
Kendo模板引擎的核心作用就是使用HTML模板对Kendo组件进行灵活补充,以丰富其表现形式.在组件实例化过程中,可以使用template及其相关配置项(e.g. valueTemplate)对组件 ...
Thymeleaf模板引擎基本语法
Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...
FreeMarker Thymeleaf - 前端模板引擎
FreeMarker 概述 FreeMarker是一种模板引擎(基于模板和要改变的数据),主要用于MVC中的view层,生成html展示数据给客户端,可以完全替代jsp 它不是面向最终用户的,而是一个 ...
SpringBoot-web开发(三): 模板引擎Thymeleaf
[SpringBoot-web系列]前文: SpringBoot-web开发(一): 静态资源的导入(源码分析) SpringBoot-web开发(二): 页面和图标定制(源码分析) 目录 1. 引入 ...

KendoUI模板引擎 - #号语法

从JS对象渲染数据到HTML模板

执行JS表达式 # expression

KendoUI模板引擎 - #号语法相关推荐

最新文章

热门文章