javascript - XTemplate 与 Sencha Touch 中的数组相同级别

Question

给定两个(或更多)相同长度的数组，如何在 ExtJS XTemplate 中表达值和所需的输出格式？例如，我的输入数据类似于:

var data = {
    name        : 'xxx',
    rowTitleArr : ['1','2','3'],
    colTitleArr : ['a','b','c']
};

...我想要以下形式的输出:

1 a
2 b
3 c

Answer 1

您可以使用模板中的实用函数将输入数据映射到更易于管理的范围:

{
    // component config ...

    data: data,
    tpl: [
        '<tpl for="this.merge(values.rowTitleArr, values.colTitleArr)">',
            '{row} {col} <br/>',
        '</tpl>',
        {
            merge: function(a1, a2){
                var len = Math.min(a1.length, a2.length);
                    for(var i=0, arr=[]; i<len; i++)
                        arr.push({ row: a1[i], col: a2[i] });
                return arr;
            }
        }
    ]
}

» fiddle