sencha/javascript - tplテンプレートの中から関数を呼び出す方法

Question

私はSencha touchを使用しています。私はtwitterフィードからURLをクリック可能なリンクに変えるためにオンラインで見つけたtwitterの例を修正しようとしています。私は、Sencha Touchライブラリの例の1つに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>' 

は、この情報がお役に立てば幸い！

乾杯 スチュアート