sencha / javascript - 如何从 tpl 模板中调用函数

Posted 2023-02-26

【中文标题】sencha / javascript - 如何从 tpl 模板中调用函数

【英文标题】：sencha / javascript - how to call a function from inside a tpl template

【发布时间】：2011-06-17 19:31:18

【问题描述】：

我正在使用 Sencha touch，我正在尝试修改我在网上找到的一个 twitter 示例，以便将 twitter 提要中的 url 转换为可点击的链接。我看到 sencha touch 库中的一个示例使用了 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'

【参考方案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>'

【讨论】：

方括号符号就像一个魅力，所以一定要使用它。