jwall
18 Oct 2010, 9:25 PM
On the API page for XTemplate, it explains that given a data structure that looks like:
var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Ext JS, Inc',
email: 'tommy@extjs.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'],
kids: [{
name: 'Joshua',
age:3
},{
name: 'Matthew',
age:2
},{
name: 'Solomon',
age:0
}]
};
That the following XTemplate would work:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">', // interrogate the kids property within the data
'<p>{name}</p>',
'</tpl></p>'
);
I was attempting to implement code using XTemplates and a model I had defined. My model is defined like this:
Ext.regModel('GameState', {
fields: [
{
name: 'gametoken',
type: 'string'
},
{
name: 'username',
type: 'string'
},
{
name: 'usertoken',
type: 'string'
},
{
name: 'role',
type: 'string'
}
],
hasMany: {
model: 'AllPlayers',
name: 'players',
associationKey: 'players'
}
});
Ext.regModel('AllPlayers', {
fields: [
{
name: 'playername',
type: 'string'
},
{
name: 'isalive',
type: 'boolean',
defaultValue: true
},
{
name: 'isready',
type: 'boolean',
defaultValue: false
}
],
belongsTo: 'GameState'
});
And I had a template that looks like this:
new Ext.XTemplate(
'<tpl for="players">',
'<div class="players">',
'<div class="playername">{playername}</div>',
'<div class="playerready">{isready}</div>',
'</div>',
'</tpl>')
Because all I wanted was to output the players which exist in a GameState. Unfortunately I would always end up with a blank page, and in my browser's JavaScript console would be this error:
Uncaught ReferenceError: players is not defined
I checked a million different things, ensuring that a "GameState" Model instance was indeed in the Store that I bound to the Ext.DataView to which the above XTemplate was attached. In the end (after hours of debugging) I found that I had to create a template like this:
new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="players">',
'<div class="players">',
'<div class="playername">{playername}</div>',
'<div class="playerready">{isready}</div>',
'</div>',
'</tpl>',
'</tpl>' )
Wrapping everything in an extra <tpl for="."></tpl> loop... something which was never explicitly shown in any example, nor was it obvious based on the example template in the XTemplate API document. Hopefully other people running into the same problem can use this information to fix it faster than I did :)
var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Ext JS, Inc',
email: 'tommy@extjs.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'],
kids: [{
name: 'Joshua',
age:3
},{
name: 'Matthew',
age:2
},{
name: 'Solomon',
age:0
}]
};
That the following XTemplate would work:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">', // interrogate the kids property within the data
'<p>{name}</p>',
'</tpl></p>'
);
I was attempting to implement code using XTemplates and a model I had defined. My model is defined like this:
Ext.regModel('GameState', {
fields: [
{
name: 'gametoken',
type: 'string'
},
{
name: 'username',
type: 'string'
},
{
name: 'usertoken',
type: 'string'
},
{
name: 'role',
type: 'string'
}
],
hasMany: {
model: 'AllPlayers',
name: 'players',
associationKey: 'players'
}
});
Ext.regModel('AllPlayers', {
fields: [
{
name: 'playername',
type: 'string'
},
{
name: 'isalive',
type: 'boolean',
defaultValue: true
},
{
name: 'isready',
type: 'boolean',
defaultValue: false
}
],
belongsTo: 'GameState'
});
And I had a template that looks like this:
new Ext.XTemplate(
'<tpl for="players">',
'<div class="players">',
'<div class="playername">{playername}</div>',
'<div class="playerready">{isready}</div>',
'</div>',
'</tpl>')
Because all I wanted was to output the players which exist in a GameState. Unfortunately I would always end up with a blank page, and in my browser's JavaScript console would be this error:
Uncaught ReferenceError: players is not defined
I checked a million different things, ensuring that a "GameState" Model instance was indeed in the Store that I bound to the Ext.DataView to which the above XTemplate was attached. In the end (after hours of debugging) I found that I had to create a template like this:
new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="players">',
'<div class="players">',
'<div class="playername">{playername}</div>',
'<div class="playerready">{isready}</div>',
'</div>',
'</tpl>',
'</tpl>' )
Wrapping everything in an extra <tpl for="."></tpl> loop... something which was never explicitly shown in any example, nor was it obvious based on the example template in the XTemplate API document. Hopefully other people running into the same problem can use this information to fix it faster than I did :)