Ext.XTemplate

Posted 茗小铭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ext.XTemplate相关的知识,希望对你有一定的参考价值。

1. template 是什么

template 是一个 html 片段的模板,它可以进行预编译从来提升性能。

2. Xtemplate

Xtemplate 继承自 template,Xtemplate 支持以下这些功能:

1.数组

1) 如果给定的是个数组,他会自动填充,为数组总每一项重复 template 中的 block。
2) for=“.” ,会从根节点开始重复,for=“record” ,会从 record 节点开始重复。

‘<tpl for="score" >‘ +
‘<span class="values"></span>‘ +
‘</tpl>‘ +
例如,数组score,其中每一个值为values。

2.处理基本的比较运算符

注:大于和小于号要使用html实体字符。

‘<tpl if="price &amp;&amp; discount">‘ +

‘<div class="item-price"><span>{price}</span><span>{discount}</span></div>‘ +

‘</tpl>‘

例如,price && discount 为true时,显示div。

3.支持基本的数学函数

支持+ - * /等

<span class="report-blue-number">{[parseInt((values.rightNum/values.totalNum).toFixed(2) * 100)]}%</span>
<span class="report-blue-number">{[values.totalNum-values.rightNum]}</span>

4.执行有内置模板变量的代码

任何在{[ ]}中的代码都会在 template 的作用域中被执行。生成的结果包括计算表达式和结果,其中代码中有一些特殊的变量如下:

  • out:template 附加的输出数组
  • values:当前作用域下的值,你可以通过改变作用域来改变子 template
  • parent:祖先的作用域
  • xindex:如果是循环 template,index 以 1 开始
  • xcont: 如果是循环 template,会循环 template 的所有的数据。


另外, 在 "{% ... %}"中的代码会被直接插入到 template 生成的代码中, 这些代码块没有输出,它们可以做一些简单的操作,例如,在循环中 break/continue,或者,控制构造函数或方法的调用(要求它们没有输出)。

 

5 自定义成员函数

自定义函数需要写在 Xtemplate 内部,写在html代码之后,用逗号隔开。

tpl: new Ext.XTemplate(
html code,
{
starClass: function (values) {},
isPassed: function (defeatNum) {}
}
)

html行间属性调用该函数时使用class={[this.startClass(vaules)]},或者class=“this.startClass(vaules)”都可以。

‘<p class={[this.setPriceCls(values.transaction_date)]}>{[Formatter.toFixed(values.price,1)]}</p>‘
 

6 可以定义一些 API 中没有定义的特殊标记或内置运算符。

 

3.我遇到的问题及解决方法总结

 

3.1 我遇到的问题:


1)template 中出现空的 div 效果如图:


‘<div >’,
‘<tpl if = “entryType”=="money_fund"”>’,’<tpl>’,
‘</div >’,


原因:先声明了 DIV,后进行的判断,所以无论 IF 是否为真,都会有一个 DIV 块。
将 DIV 块放入 tpl 中即可,代码如下:


‘<tpl if = “entryType”=="money_fund"”>’,
‘<div >’, ‘</div >’,
’<tpl>’,


效果如下:
2)tpl 中断句时什么时候用“+”,什么时候用“,”
“+”:
没有“[]“时,断句要用“+”,如下:


tpl: ‘<div class="investment-portfolio-buysellpoint-head">‘ +
‘</div>‘,


“,”:
有”[]“时,断句可以用“,”,如下:

itemTpl: [
‘<div>‘,
‘</div>‘
],

3)设置tpl时,需要同时设置data,否则会造成数据不渲染。
4)使用tpl+data形式是,不是使用updateData方法,否则会造成数据不渲染。

 

3.2 总结:

1)参数的调用:
<tpl>{notifyingAt}</tpl>
其中:notifyingAt 为一个参数
参数可以做简单的四则样式,比如有一个 age 参数,我要算一算他 3 年以后是几岁的话:

<tpl>{age+3}</tpl>

2)函数的调用:

<tpl>{[Ext.Date.format(new Date(),"Y-m-d")]}</tpl>

3)函数中参数的调用:
<tpl>{[Ext.Date.format(value.notifyingAt,"Y-m-d")]}</tpl>

以上是关于Ext.XTemplate的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS 模板类型 Ext.Template/Ext.XTemplate

Ext.require 的目的是啥

Extjs 5.x 日期时间控件DateTime源码

模版与数据视图

微信小程序代码片段

VSCode自定义代码片段——CSS选择器