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

I would like to use Ext's String method on some text that will be output to the view.

我想在将输出到视图的一些文本上使用Ext的字符串方法。

For example:

例如:

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(''),

but of course the concatenation in line 10 is illegal.

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

Do you know if it's possible or how to do this correctly?

你知道这是可行的还是正确的?

3 个解决方案

#1

This should solve your problem:

这应该可以解决你的问题:

    '<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>'

you can find more information about the XTemplate at Sencha Docs

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

The thing with template member function is that as far as I know you cannot define them directly in the itemTpl in the regular way, but need to explicitly define a new XTemplate and then use that in your itemTpl. See example:

模板成员函数的问题是，据我所知，您不能以常规方式在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

Senchafiddle例子

This should work fine as will the code below (just insert the code from the XTemplate above).

这应该和下面的代码一样工作得很好(只需从上面的XTemplate中插入代码)。

itemTpl: new XTemplate(...),

Senchafiddle example

Senchafiddle例子

Hope that this sortens it out!

希望这能让它消失!

edit noticed that I hade missed the closing tags, sometimes it works without them, but it's good practice to always use them as they could cause interesting errors (in this case a missing bracket on the generated code).

edit注意到我漏掉了结束标记，有时没有它们也可以工作，但是最好总是使用它们，因为它们可能会导致有趣的错误(在本例中，生成的代码中缺少一个括号)。

#2

Note: The example below does not work as expected! Look at zelexir answer for clarification!

注意:下面的示例并没有像预期的那样工作!看看zelexir的答案吧!

You can use memberfunctions

您可以使用memberfunctions

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);
        }
    }
]

#3

You can use a function inside a template

您可以在模板中使用函数。

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);
        }
    }
]