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