这次主要介绍Sencha Touch中的XTemplate组件，利用该组件可以方便的构造html代码，很实用。为了减少不必要的说解，让内容更加简洁清晰，这里直接给出对应代码和代码的相应注释，只要有JavaScript基础的同学就能轻易掌握。

一、利用XTemplate创建HTML代码

var data = {//在这定义需要使用的内容
string_value:'The initial text '
};
var tpl = new Ext.XTemplate(//定义XTemplate模板
'<table>',
'<tr>',
'<td>{string_value}</td>',
'</tr>',
'</table>'
);
var tplHtml = tpl.apply(data);//用apply方法将定义的变量应用到模版中
var myToolbar = Ext.create('Ext.Toolbar',{
docked:'top',
items:[
{
text:'replace template',
handler:function(){//定义替换按钮的事件
var newData = {
string_value:'text after replacement'
};
tpl.overwrite(Ext.get('subPanel'),newData); //overwrite方法
}
}
]
});
var myPanel = Ext.create('Ext.Panel',{
items:[myToolbar,{
id:'subPanel',
stype:'panel',
html:'tplHtml'
}]
});
Ext.Viewport.add(myPanel);

二、XTemplate使用数组

var data = ({
name:’张三’,
age:37
},{
name:’李四,
age:28’
});
var tpl = new Ext.XTemplate(
‘<p>用户：’,
‘<tpl for=”.”>’,//.标识读取所有内容
‘<p>{#}.姓名：{name},年名：{age}</p>’,//特殊字符{#}标识编号，自动设置
‘<tpl></p>’
);;
var tplHtml = tpl.apply(data);
var myPanel = Ext.create(‘Ext.Panel’,{
html:tplHtml;
});
Ext.Viewport.add(myPanel)
 对于for的使用还有下面一个例子：
var company = {
name:’ADIDAS’,
employer:[{
name:’Tom’
},{
name:’Jacl’
}]
};
var tpl = new Ext.XTemplate(
‘<p>用户：</br>’,
‘<tpl for=”employer”>’,//这里for遍历的就是employer中的所有变量
‘<p>{#}.姓名：{name}</br>工作单位：{parent.name}’,//parent读取for的父元素
‘</tpl>’
);
 
tpl中还可以加入if和操作符判断，符合条件的显示
‘<tpl for=”.”>’,
‘<tpl if=”age>=30&&age<40”>’,//只显示年龄在30-40之间的
//......

三、XTemplate内置变量

values:模板正在访问的数据对象

parent:模板正在访问的成员对象的父对象

xindex:对数组进行遍历时，xindex变量值为当前所显示数据徐昂在数组中的编号

xcount:对数组进行遍历时，xcount变量值为数组中数据的条数

这些都是内置变量，可以直接调用

示例：

‘<tpl for=”hobby”>’,
‘<tpl if=”xindex>1”>’,//如果是第一个则在后面加,符号，起到分割作用
‘,’
‘</tpl>’
‘{.}’//否则加.
‘</tpl>’
‘({values.hobby.length}项)’,//显示一共有多少个爱好
‘<tpl id=”xindex==xcount”,
‘{[index]}人’>’,//当遍历所有员工后，显示一共有多少个人
‘</tpl>’

四、在XTemplate中使用自定义函数

var tpl = new Ext.XTemplate(
//这里写tpl模板html内容
//以下是函数内容
{
compiled:true,//设定为以下函数预先编译，就可以在上面直接调用了
isYounger:function(age){
return age<30;
}
}
)

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！