Sencha Touch 2 Panel w/ Template 包括数据和对象答案

【问题标题】：Sencha Touch 2 Panel w/ Template include Data and an ObjectSencha Touch 2 Panel w/ Template 包括数据和对象
【发布时间】：2013-04-04 03:39:14
【问题描述】：

我想知道是否可以在 Sencha Touch 2 的模板中同时包含数据并创建一个新对象？

我有以下代码：

Ext.define('MyApp.view.VideosDetail', {
extend: 'Ext.Panel',
xtype: 'videosdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        '{content}',
        {
            xtype: 'video',
            width: 400,
            height: 400,
            url: '{link}'
        }
    ]
}
});

我看到 [object Object] 而不是带有链接 url 的视频对象。

{content} 通过商店等正常工作。

【问题讨论】：

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

【解决方案1】：

好的，有两件事你必须记住

您不能像刚才那样在 tpl 中使用复杂的对象。在 Sencha Touch 中，在 tpl 字符串之后添加一个“，”，后跟一个“{ ... }”意味着将成员函数或配置添加到您的 XTemplate。在这种情况下，ST 将您的对象误解为某种成员函数，并且没有显示任何内容，因为您没有调用任何函数。

成员函数示例 ::

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
    '<tpl if="this.isGirl(name)">',
        '<p>Girl: {name} - {age}</p>',
    '<tpl else>',
        '<p>Boy: {name} - {age}</p>',
    '</tpl>',
    '<tpl if="this.isBaby(age)">',
        '<p>{name} is a baby!</p>',
    '</tpl>',
'</tpl></p>',
{
    // XTemplate configuration:
    disableFormats: true,
    // member functions:
    isGirl: function(name){
       return name == 'Sara Grace';
    },
    isBaby: function(age){
       return age < 1;
    }
}
);

如果您有一个复杂的 tpl 对象，请始终尝试创建一个单独的 XTemplate 对象，这将使您的代码简单而美观（即易于阅读）
我之前做过类似的事情并将视频添加到我的 XTemplate 中。但我没有使用视频对象。相反，我创建的 tpl 如下所示::

在我的场景中，我的视频 url 由两部分组成，vurl1 是常见的，例如“www.youtube.com/watch?” vcode1 是随后的动态代码。

【讨论】：