Xtemplate
知识点 :
迭代:
<tpl for="kids">
对 kids 迭代
分支
<tpl if="age < 18">
占位符
{variable}
<p>name:{name}</p>
表达式
在[ ]中的代码被认为是表达式
在[ ] 中可以使用下列变量
* values: 当前对象的引用,通过这个对象你可以直接改变重写模板所用的数据
* parent: The scope (values) of the ancestor template.
* xindex:循环模板中迭代的下标,开始下标为1
* xcount: 如果正在循环模板中,表示循环的次数.
* fm: Ext.util.Format.的别名
模板中使用函数
..........
示例分析:
var data = {
name: 'Jack Slocum',
company: 'Ext JS, LLC',
address: '4 Red Bulls Drive',
city: 'Cleveland',
state: 'Ohio',
zip: '44102',
kids: [{
name: 'Sara Grace',
age:33,
kids:[{name:"户惊涛",age:12}]
},{
name: 'Zachary',
age:26
},{
name: 'John James',
age:16
}]
}
'<br>{[values.name + "aaa"]}',
k'<tpl for="ids">',
'<p><tpl if="age < 18"><span style="color:red"></tpl>{#}:{name} Dad:{parent.name}<tpl if="age < 18"></span></tpl></p>'
for=“kids” if=”age < 18” 和 “aaa” 使用的是双引号,如果外边使用双引号而这些地方使用单引号是不会成功的。
“<tpl for=’ids’>”,
“{name}” 输出的是父模板中的name,虽然输出内容不准确,但还是输出了内容,说明不是由于外面的单引号引起的,而是内部使用双引号引起的。
不在 [ ] 中也可以使用基本运算符号 如 +-* /,不过只是对数字类型的数据支持
age 数子类型 {age+ 22} 输出两数相加后的结果 {age+"22"}输出的结果就是它本身{age+"22"}
1. '<tpl for="kids">',
'{name}',
'<tpl if="[values.kids]">{[values.kids[0]]}</tpl>',
"</tpl>"
2. '<tpl for="kids">',
'{name}',
'<tpl for="kids">',
'{name}',
"</tpl>"
"</tpl>"
1. value.kids.0 为空或不是对象
2 dosen’t work.
分享到:
相关推荐
XTemplate 使用一套简洁的模板语言,允许开发者在模板中嵌入 JavaScript 表达式。例如: ```html <div>{name} ``` 这段模板会遍历 `items` 数组,并将每个元素的 `name` 属性值插入到 `div` 中。 ### 2. 控制...
在Back2Front中,XTemplate被用于前端页面的视图层,它允许开发者使用简洁的语法结构将数据和逻辑与HTML分离,提高代码的可读性和复用性。XTemplate支持条件语句、循环结构、函数调用等,使得模板文件更易于理解和...
在本文中,我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和模板功能,帮助开发者构建用户界面。XTemplate是ExtJS中的一个...
利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。
本文通过实例详细介绍了xtemplate在Node.js中的安装和使用方法。 在开始使用xtemplate之前,首先要确保已经安装了Node.js环境。接着,使用npm包管理器来安装xtemplate。在命令行中输入以下命令即可完成安装: ``` ...
think-view-xtemplate 使用nunjucks渲染ThinkJS 3.x的视图文件 安装 npm install think-view-xtemplate 如何使用 const xtpl = require ( 'think-view-xtpl' ) ; exports . view = { type : 'xtpl' , xtpl : { ...
亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var ...壳要使用 shell 版本,您最好使用-g安装它 npm install kissy-xtemplate -g然后,您可以使用xtemplate bin 进行编译。 xtemplate a.xtpl.html
总结一下,这个实例演示了如何使用Ext.XTemplate: 1. 发送Ajax请求获取JSON数据。 2. 解析JSON数据为JavaScript对象。 3. 创建Ext.XTemplate实例,定义数据和HTML结构的关系。 4. 编译模板以优化性能。 5. 将模板...
如果我们想使用xtpl ,我们还需要在 package.json 上安装独立的xtemplate 。 xtpl2只是将两个模块包装在一个包中。 特点 2 以另一种方式支持koa ,比如 var app = koa(); app.context.render = require('xtpl2')....
使用示例 var xtemplate = new ( require ( 'task-xtemplate' ) ) xtemplate . run ( inputs , options , logger ) 选项 选项.version 类型: string 您的 KISSY 版本,默认为最新版本。 发布历史 2014-11-11 ...
模板浏览器和nodejs上的高速,可扩展模板引擎库。...安装资源() 在浏览器上使用支持requirejs modulex kissy kissy画廊中文教程演示 在节点上使用请使用xtpl 贡献贡献 执照xtemplate是根据MIT许可发布的。
2015-09-12:V 1.5 在设置新语言时启用了自动翻译操作现在,翻译文件以异步模式加载(比不推荐使用的同步模式更好) 新增:现在,您可以简单地添加自己的占位符激活器添加了新方法register和unregister以管理自定义...
标题中的"LwIPv2.XTemplate(CMSISRTOS2)_Copy.7z"是一个包含轻量级互联网协议(LWIP)版本2.x的模板项目,它基于CMSIS-RTOS2(ARM公司提供的实时操作系统服务接口标准)进行了适配。这个项目是针对安富莱(Altium ...
本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...
**XTemplate 开源模板引擎详解** XTemplate 是一个基于 XML 的高效、易用的模板引擎,主要用于构建动态 Web 页面和应用程序。它允许开发者将数据和视图逻辑分离,通过简单的 XML 结构定义模板,然后结合数据进行...
3. 使用XTemplate:XTemplate是ExtJS的一个高级模板引擎,提供更丰富的功能,如支持函数调用、条件语句等。 三、模板语法 模板语法主要基于两种类型的占位符: - `{}`:双大括号内的变量名代表数据对象的属性,例如...
xtpl emmet借助强大的 Emmet 插件,提供 xtemplate 中常用代码片段,从而提高开发效率。使用方法基于 Emmet 插件,以 Sublime text 为例:确保已经安装了 Emmet 插件,并且可以正常使用打开菜单 Preferences→...