sencha touch笔记(8)——XTemplate

时间:2023-01-31 18:28:54

XTemplate能够很方便的在页面中编写一段可以使用数据仓库中数据的html代码。

官网中给出的XTemplate类的一些除了编写html代码之外的方法:

A template class that supports advanced functionality like:

  • Autofilling arrays using templates and sub-templates
  • Conditional processing with basic comparison operators
  • Basic math function support
  • Execute arbitrary inline code with special built-in template variables
  • Custom member functions
  • Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created
1.tpl标签和for语句来有选择的控制条件,同时还可以使用if,elseif,else以及switch,case这样的语句来进行条件分支的判断,官方的示例代码:

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',//for循环
        '<p>{name} is a ',
        '<tpl if="age >= 13">',
            '<p>teenager</p>',
        '<tpl elseif="age >= 2">',
            '<p>kid</p>',
        '<tpl else>',
            '<p>baby</p>',
        '</tpl>',
    '</tpl></p>'
);

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<p>{name} is a ',
        '<tpl switch="name">',//switch语句,发现确实很屌的东西
            '<tpl case="Aubrey" case="Nikol">',
                '<p>girl</p>',
            '<tpl default">',
                '<p>boy</p>',
        '</tpl>',
    '</tpl></p>'
);
2.此外还有很多内置的模版的变量,内置变量的在{[ ]}之间,会被像{ }之间一样被输出;而在{%  %}之间的语句则只是用来运行并且作为判断条件。比较常用的有values表示模版正在访问的数据,xindex表示在对数组进行遍历时,显示当前数据项在数组中的序号(第一项为1);xcount当数组进行遍历时,表示数组中数据的条数。

'<tpl for="kids">',
        '{% if (xindex % 2 === 0) continue; %}',
            '{name}',
        '{% if (xindex > 100) break; %}',//可以用来break the loop
        '</div>',
'</tpl></p>'
3.在模版中使用自定义的函数,自定义的函数在配置选项中被定义

var tpl = new Ext.XTemplate(
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '<tpl else>',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
    '</tpl>',
    {
        // XTemplate configuration:
        disableFormats: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        }
    }
);
tpl.overwrite(panel.body, data);