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)和this.tr(\'Current location\')代替currentLocation:this.tr和\'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());

Ext.XTemplate中的内联变量

1 个答案: