Javascript 如何在 XTemplate (itemTpl) 中调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12589176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call functions within a XTemplate (itemTpl)
提问by pepe
I would like to use Ext's Stringmethod on some text that will be output to the view.
我想在一些将输出到视图的文本上使用 Ext 的String方法。
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?
您知道这是否可能或如何正确执行此操作吗？
回答by zelexir
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,
...
This should work fine as will the code below (just insert the code from the XTemplate above).
这应该像下面的代码一样正常工作（只需插入上面 XTemplate 中的代码）。
itemTpl: new XTemplate(...),
Hope that this sortens it out!
希望这能解决它！
editnoticed 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).
编辑注意到我错过了结束标签，有时没有它们也能工作，但最好总是使用它们，因为它们可能会导致有趣的错误（在这种情况下，生成的代码中缺少括号）。
回答by sra
Note: The example below does not work as expected! Look at zelexiranswer for clarification!
注意：下面的示例没有按预期工作！查看zelexir答案以进行澄清！
You can use 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);
}
}
]
回答by Johan Haest
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);
}
}
]
