function - Ext.XTemplate 中的内联变量

Question

嗨，我使用的是 sencha touch 2，但 Ext.XTemplate 有一些问题。

当我使用下一个模板并且它工作正常时：

var template = new Ext.XTemplate(
    '<div title="{currentLocation:this.tr}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated ' + value;
        }
    }
);

template.apply({currentLoaction: 'Current location'});

<div title="Current Location">
    <img src="styles/css/img/locate.png" height="30px" width="30px" />
</div>

但我更喜欢'Current location'在模板中设置变量，但它不能正常工作（{\'Current location\':this.tr}返回空值）：

var template = new Ext.XTemplate(
    '<div title="{\'Current location\':this.tr}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated ' + value;
        }
    }
);

template.apply();

<div title="">
    <img src="styles/css/img/locate.png" height="30px" width="30px" />
</div>

我尝试使用this.tr(currentLocation)andthis.tr(\'Current location\')而不是currentLocation:this.trand \'Current location\':this.tr，但是在这两种情况下都返回模板<div title="。

谁能解释我做错了什么以及如何解决我的问题？

Answer 1

如果括在方括号中，则可以执行任意代码，请参阅Ext.XTemplate。所以在你的例子中：

var template = new Ext.XTemplate(
    '<div title="{[this.tr(\'Current location\')]}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated [' + value + ']';
        }
    }
);

document.write(template.apply());