如何在 XTemplate (itemTpl) 中调用函数答案

【问题标题】：How to call functions within a XTemplate (itemTpl)如何在 XTemplate (itemTpl) 中调用函数
【发布时间】：2012-09-17 08:06:45
【问题描述】：

我想对一些将输出到视图的文本使用 Ext 的 String 方法。

例如：

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>' + Ext.String.ellipsis( + '{post_text_teaser}' + \, 4) + '</p>',
    ...
].join(''),

当然，第 10 行的串联是非法的。

你知道这是否可能或如何正确地做到这一点？

【问题讨论】：

@johan 和 @sra 注意 OP 中的编辑 - .join('') 在 itemTpl 的末尾 - 包含函数时会出现问题吗？
只要将模板作为 XTemplate 运行应该没问题

标签： javascript extjs extjs4 sencha-touch sencha-touch-2

【解决方案1】：

注意：下面的示例无法按预期工作！看看 zelexir 答案来澄清！

你可以使用成员函数

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.doAction(post_text_teaser)]}</p>',
    ...,
    {
        // XTemplate configuration:
        disableFormats: true,
        // member functions:
        doAction: function(name){
           return Ext.String.ellipsis(name + "\", 4);
        }
    }
]

【讨论】：

@torr 好吧，我认为它需要被包装成 '' 但无论如何，它似乎无法按预期工作，至少在我的沙箱中......我会继续测试它
join 会弄乱' 的使用，所以它需要在函数参数中使用"...这样可以消除错误，但我仍然无法得到这工作......
@torr 我也是。但我需要更多时间来做这件事。反正我也很感兴趣。我认为它会这样工作
thx @sra - 仅供参考，我收到了Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'doAction' of undefined，这让我想知道post_text_teaser 是否应该放在大括号中？顺便说一句，我使用 return Ext.String.ellipsis(name + "," + 4); 而不是上面的代码

【解决方案2】：

这应该可以解决您的问题：

    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[Ext.String.ellipsis(values.post_text_teaser,4,false)]}</p>',
    '</tpl>'

您可以在Sencha Docs找到有关 XTemplate 的更多信息

模板成员函数的问题是，据我所知，您不能以常规方式直接在 itemTpl 中定义它们，而是需要显式定义一个新的 XTemplate，然后在您的 itemTpl 中使用它。见例子：

var tpl = new XTemplate(
    '<tpl switch="post_type">',
        '<tpl case="new_user">',
            '<p>{post_text_teaser}</p>',
            '<p>{timestamp}</p>',
        '<tpl default>',
            '<p>{[this.shorten(values.post_text_teaser)]}</p>',
    '</tpl>',
    {        
        shorten: function(name){
           return Ext.String.ellipsis(name,4,false);
        }
    }
);

...

itemTpl: tpl,

...

Senchafiddle example

这应该和下面的代码一样正常工作（只需插入上面 XTemplate 中的代码）。

itemTpl: new XTemplate(...),

Senchafiddle example

希望这能解决问题！

edit 注意到我错过了结束标签，有时没有它们也能工作，但最好总是使用它们，因为它们可能会导致有趣的错误（在这种情况下，生成的代码）。

【讨论】：

绝对+1 可以解释为什么这不适用于成员方法吗？
在答案中添加了有关成员函数的信息
是的，它就像一个魅力 - 感谢 zelexir 和 @sra 的建议
好吧，当使用成员函数时，我无法让它工作。也许你有时间可以提供一个 JSFiddle，不是吗？
sra：为您添加了小提琴示例，并注意关闭标签的重要性

【解决方案3】：

您可以在模板中使用函数

itemTpl: [
    ...
    '<tpl switch="post_type">',
    '<tpl case="new_user">',
        '<p>{post_text_teaser}</p>',
        '<p>{timestamp}</p>',
    '<tpl default>',
        '<p>{[this.concatenate(values.post_text_teaser)]}</p>',
    ...,
    {
        concatenate: function(teaser) {
               return Ext.String.ellipsis( + teaser + \, 4);
        }
    }
]

【讨论】：

这个解决方案在控制台上给了我Uncaught SyntaxError: Unexpected token , :( -- , 是我们试图逃避的那个