ExtJS XTemplates:从另一个模板调用模板

时间:2012-12-20 13:44:31

标签: javascript templates extjs extjs4

我正在尝试避免冗余,并调用通用XTemplate来格式化时间戳中GMT的日期和时间。

这不会输出我期望的字符串,只会输出UI中的[Object object]。

SCB.RMWB.templates = {
    timeStamp: function(stamp) {
        return new Ext.XTemplate(   
            '<span class="time-frame">{[ this.dateRangeMsg(stamp) ]}</span>',   
            {
                dateRangeMsg: function(stamp) {

                    console.log('stamp', stamp);    

                    var dateTime = new Date(),
                        now = Ext.Date.format(dateTime, 'U'),           // gives us seconds since the UNIX Epoch from Ext.Date class
                        offset = Ext.Date.format(dateTime, 'Z'),        // gives us GMT offset from Ext.Date class
                        minutesAgo = (now - 300),                       // 5 minutes ago
                        hourAgo = (now - 3600),                         // one hour ago
                        msg = '';


                    if (stamp >= minutesAgo && stamp <= now) {
                        msg = 'Moments ago';
                    } else if (stamp >= hourAgo && stamp <= now){
                        msg = '1 hour ago';
                    } else {
                        msg = this.formatGMT(stamp, offset).toString();
                    }   

                    return msg;

                },
                formatGMT: function(stamp, offset){

                    var time;

                    // * 1000 gives us date string to format in Ext.Date class
                    if (offset > 0){
                        time = new Date((stamp - offset) * 1000);    
                    } else {
                        time = new Date((stamp + offset) * 1000); 
                    } 

                    return Ext.Date.format(time, 'd-M-y, H:i \\G\\M\\T');

                }                   
            }
        );
    },
    notifications: {
        flyout: function(){
            return new Ext.XTemplate(
                '<tpl for=".">',    
                    '<li id="notification-flyout-{id}">',
                        '<div class="data-details">',
                            '<p>{message}</p>',
                            '{[ this.renderTimeStamp(values.sentDate) ]}',   
                        '</div>',   
                    '</li>',   
                '</tpl>',
                {
                    renderTimeStamp: function(stamp) {
                        return SCB.RMWB.templates.timeStamp(stamp);
                    }               
                }
            );
        }
    }
};

如果我将时间戳功能保留在原始模板中,它可以正常工作,但是这个功能将在不同模板中的几个地方使用,所以我想要一些更通用的东西我可以重复使用。

1 个答案:

答案 0 :(得分:2)

我在您的代码示例中有一些困难要跟随您,但是当您在模板实例上调用apply时它应该适合您。

详细说明:

在helper-namespace中创建要重用一次的模板。要重用它,请提供一个方法来获取该实例以及提供的数据。

var tpl = new Ext.Template('Name: {name}, Age: {age}');
tpl.apply({name: 'John', age: 25}); // returns a html string

此处(更详细) JSFiddle