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)和this.tr(\'Current location\')而不是currentLocation:this.tr和\'Current location\':this.tr，但在两种情况下模板返回​​。

任何人都可以解释我做错了什么以及我如何解决我的问题？

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