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> 

と\'Current location\':this.trの代わりにthis.tr(currentLocation)とthis.tr(\'Current location\')を試してみましょうが、どちらの場合もテンプレート返信​​です。

誰かが私が間違っていることを説明することができますか、私はどのように問題を解決できますか？

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