sencha touch笔记（8）——XTemplate

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);