To loop an array with XTemplate in sencha touch 2.1.0

Question

The Ext.XTemplate Docs says:

The tpl tag and the for operator are used to process the provided data object:

• If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl tag for each item in the array.
• If for="." is specified, the data object provided is examined.
• While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

I follow the first rule and assign the data config of a panel with an array of objects,but it just shows a blank.The code is as below:

                  {
                 xtype : 'panel',
                 tpl : new Ext.XTemplate([
                          '<tpl>',
                            '<div>',
                                '{index}',
                            '</div>',
                          '</tpl>'
                 ]),
                 data : [
                         {index : '11'},
                         {index : '12'},
                         {index : '13'}
                 ]
              }

So i follow the second rule and add a 'for="."' for the '<tpl>',it works! So,i want to know whether it really means you have to add a 'for="."' if you just want to loop an array with Ext.XTemplate ?

Also,is it really a bad practice to use the 'for="."' statement ?

Answer 1

Yes, <tpl for="."> means iterate over the "active" object. For example, the "active" object changes from the outer array to the inner array because during the iteration we're pointing at the inner array:

var tpl = new Ext.XTemplate([
    '<tpl for=".">', // "." points to the outer array
        '<tpl for=".">', // "." points to each inner array
            '{.}',
        '</tpl>',
    '</tpl>'
]);

console.log(tpl.apply([
    [1, 2],
    [3, 4]
]));