在 Sench Touch List itemTpl 中使用成员函数答案

【问题标题】：Using member functions within Sench Touch List itemTpl在 Sench Touch List itemTpl 中使用成员函数
【发布时间】：2011-11-27 02:34:40
【问题描述】：

关于 List 的文档提到 itemTpl 遵循 XTemplate 语法。

我想在我的 itemTpl 中使用成员函数

如果我用 XTemplate 初始化 itemTpl 并且成员函数没有参数，它可以工作：

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.hello()]}</i>', {
                hello: function () {
                    return 'Hello';
                }
            })

但一旦我尝试传递一个参数（如下面的两个示例），它就不再起作用了：

            items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {[this.helloWorld(name)}</i>', {
                helloWorld: function (name) {
                    return 'Hello ' + name;
                }
            })


        items: {
            xtype: 'list',
            store: myStore,
            itemTpl: new Ext.XTemplate('<i>{name} {name:helloWorld}</i>', {
                helloWorld: function (string) {
                    return 'Hello ' + name;
                }
            })

TypeError: 'undefined' is not a function (evalating 'fm.helloWorld(values['name'])')

我想我不应该创建一个新的 Ext.XTemplate 对象。是否有任何解决方案可以在不创建单独的 XTemplate 的情况下传递成员函数？

还是我应该放弃列表，自己在模板中构建列表？

【问题讨论】：

标签： javascript sencha-touch extjs javascript-framework

【解决方案1】：

这个用法也可以：

itemTpl :new Ext.XTemplate( '<section class="movieListItem">',
                    '<img src="{UserLogo:this.showLogo}"/>',
                    '<h1>{NickName}</h1>',
                    '<div>{Content}</div>',
                    '</section>',
                    {
                        showLogo:function(value){

                            } 

                });

【讨论】：

【解决方案2】：

使用{[this.helloWorld(name)} 而不是{[this.helloWorld(values.name)}

【讨论】：

如果它在字符串中，您必须使用 values.name，如 Adam 的回答 (ST 2.2)

【解决方案3】：

以下代码应该可以工作：

items: {
    xtype: 'list',
    store: myStore,
    itemTpl: new Ext.XTemplate(
         '<i>{name} {[this.helloWorld(values.name)]}</i>', 
         {
             compiled: true,
             helloWorld: function (name) {
                 return 'Hello ' + name;
             }
         })
}

您的第一个示例可以使用 values.name 而不仅仅是 name

【讨论】：