sencha/javascript - 如何從tpl模板中調用函數

Question

我正在使用Sencha touch，並且試圖修改我在網上找到的twitter示例，以便將Twitter源中的urls轉換爲可點擊的鏈接。我看到sencha觸摸庫中的一個例子使用linkify功能，但我無法弄清楚如何將它融入到我自己的項目中。這裏是我的代碼：

t_news = new Ext.Component({ 
     cls:'t_news', 
     title:'News', 
     scroll: 'vertical', 
     tpl: [ 
      '<tpl for=".">', 
       '<div class="tweet">', 
         '<div class="avatar"><img src="{profile_image_url}" /></div>', 
         '<div class="tweet-content">', 
          '<h2>{from_user}</h2>', 
          '<p>{text:this.linkify}</p>', 
         '</div>', 
       '</div>', 
      '</tpl>', 
     ] 
    }); 

function linkify(value){ 
     return value.replace(/(http:\/\/[^\s]*)/g, "<a target=\"_blank\" href=\"$1\">$1</a>"); 
    } 

和這裏的錯誤：

Uncaught TypeError: Object [object Object] has no method 'linkify' 

Answer 1

如果你宣佈你XTemplate明確，你可以使用它接受一個配置對象，你可以指定模板函數的最後一個構造函數的參數。這些函數可以使用value：function語法來調用。

您的代碼將變爲：

t_news = new Ext.Component({ 
cls:'t_news', 
title:'News', 
scroll: 'vertical', 
tpl: new Ext.XTemplate(
    '<tpl for=".">', 
     '<div class="tweet">', 
       '<div class="avatar"><img src="{profile_image_url}" /></div>', 
       '<div class="tweet-content">', 
        '<h2>{from_user}</h2>', 
        '<p>{text:this.linkify}</p>', 
       '</div>', 
     '</div>', 
    '</tpl>', 
    { 
     linkify: function(value){ 
      return value.replace(/(http:\/\/[^\s]*)/g, "$1"); 
     } 
    }) 

}）;

這些功能在XTemplate的範圍內執行，也可以TPL標籤裏或在方括號叫：

'<tpl if="this.linkify(values.text) == \'some text\'">', 
'</tpl>' 

'<p>{[this.linkify(values.text)]}</p>' 

希望這有助於！

乾杯 斯圖爾特