`

Xtemplate 的使用

EXT 
阅读更多

Xtemplate

 知识点 :

迭代:
<tpl for="kids">
对 kids 迭代
分支
<tpl if="age &lt; 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 &lt; 18"><span style="color:red"></tpl>{#}:{name} Dad:{parent.name}<tpl if="age &lt; 18"></span></tpl></p>'
 
 for=“kids” if=”age &lt; 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:xtemplate模板

    XTemplate 使用一套简洁的模板语言,允许开发者在模板中嵌入 JavaScript 表达式。例如: ```html &lt;div&gt;{name} ``` 这段模板会遍历 `items` 数组,并将每个元素的 `name` 属性值插入到 `div` 中。 ### 2. 控制...

    Node.js-Back2Front基于Express和XTemplate的模块化开发框架

    在Back2Front中,XTemplate被用于前端页面的视图层,它允许开发者使用简洁的语法结构将数据和逻辑与HTML分离,提高代码的可读性和复用性。XTemplate支持条件语句、循环结构、函数调用等,使得模板文件更易于理解和...

    extjsExtjs学习笔记——多个图片XTemplate排版居中,自动缩放处理

    在本文中,我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和模板功能,帮助开发者构建用户界面。XTemplate是ExtJS中的一个...

    ext xtemplate 实例 利用模板 表格合并行 表格分组

    利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。

    xtemplate node.js 的使用方法实例解析

    本文通过实例详细介绍了xtemplate在Node.js中的安装和使用方法。 在开始使用xtemplate之前,首先要确保已经安装了Node.js环境。接着,使用npm包管理器来安装xtemplate。在命令行中输入以下命令即可完成安装: ``` ...

    think-view-xtemplate:使用nunjucks渲染ThinkJS 3.x的视图文件

    think-view-xtemplate 使用nunjucks渲染ThinkJS 3.x的视图文件 安装 npm install think-view-xtemplate 如何使用 const xtpl = require ( 'think-view-xtpl' ) ; exports . view = { type : 'xtpl' , xtpl : { ...

    kissy-xtemplate:用于 KISSY 的独立 XTemplate 编译器

    亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var ...壳要使用 shell 版本,您最好使用-g安装它 npm install kissy-xtemplate -g然后,您可以使用xtemplate bin 进行编译。 xtemplate a.xtpl.html

    一个简单的Ext.XTemplate的实例代码

    总结一下,这个实例演示了如何使用Ext.XTemplate: 1. 发送Ajax请求获取JSON数据。 2. 解析JSON数据为JavaScript对象。 3. 创建Ext.XTemplate实例,定义数据和HTML结构的关系。 4. 编译模板以优化性能。 5. 将模板...

    xtpl2:xtpl 和 xtemplate 的捆绑模块

    如果我们想使用xtpl ,我们还需要在 package.json 上安装独立的xtemplate 。 xtpl2只是将两个模块包装在一个包中。 特点 2 以另一种方式支持koa ,比如 var app = koa(); app.context.render = require('xtpl2')....

    task-xtemplate:KISSY XTemplate 编译器

    使用示例 var xtemplate = new ( require ( 'task-xtemplate' ) ) xtemplate . run ( inputs , options , logger ) 选项 选项.version 类型: string 您的 KISSY 版本,默认为最新版本。 发布历史 2014-11-11 ...

    xtemplate:用于节点和浏览器的可扩展模板引擎库

    模板浏览器和nodejs上的高速,可扩展模板引擎库。...安装资源() 在浏览器上使用支持requirejs modulex kissy kissy画廊中文教程演示 在节点上使用请使用xtpl 贡献贡献 执照xtemplate是根据MIT许可发布的。

    XTemplate:一个用于管理HTML片段模板的简单Javascript库

    2015-09-12:V 1.5 在设置新语言时启用了自动翻译操作现在,翻译文件以异步模式加载(比不推荐使用的同步模式更好) 新增:现在,您可以简单地添加自己的占位符激活器添加了新方法register和unregister以管理自定义...

    LwIPv2.XTemplate(CMSISRTOS2)_Copy.7z

    标题中的"LwIPv2.XTemplate(CMSISRTOS2)_Copy.7z"是一个包含轻量级互联网协议(LWIP)版本2.x的模板项目,它基于CMSIS-RTOS2(ARM公司提供的实时操作系统服务接口标准)进行了适配。这个项目是针对安富莱(Altium ...

    Ext_3.2模板的使用示例

    本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...

    XTemplate-开源

    **XTemplate 开源模板引擎详解** XTemplate 是一个基于 XML 的高效、易用的模板引擎,主要用于构建动态 Web 页面和应用程序。它允许开发者将数据和视图逻辑分离,通过简单的 XML 结构定义模板,然后结合数据进行...

    ExtJS模板使用说明(含代码示例).zip

    3. 使用XTemplate:XTemplate是ExtJS的一个高级模板引擎,提供更丰富的功能,如支持函数调用、条件语句等。 三、模板语法 模板语法主要基于两种类型的占位符: - `{}`:双大括号内的变量名代表数据对象的属性,例如...

    xtpl-emmet:sublime 的 xTemplate 代码片段

    xtpl emmet借助强大的 Emmet 插件,提供 xtemplate 中常用代码片段,从而提高开发效率。使用方法基于 Emmet 插件,以 Sublime text 为例:确保已经安装了 Emmet 插件,并且可以正常使用打开菜单 Preferences→...

Global site tag (gtag.js) - Google Analytics