PDA

View Full Version : XTemplate if statement not working



ShatyUT
31 Dec 2010, 11:47 AM
I am still very new to Sencha Touch and attempting to use an XTemplate with a DataView object. I am getting all the correct rows of data displaying except a couple conditional pieces of the template don't seem to work. Here is my XTemplate code:



new Ext.XTemplate(
'<tpl for=".">',
'<div class="game-wrap" id="gamerow{id}">',
'<span class="hteam">{hometeam}</span>',
'<tpl if="this.isPick(pick, hometeam)">',
'<input class="hradio" type="radio" name="gameradio{id}" checked value="{hometeam}"/>',
'</tpl>',
'<tpl if="this.isPick(pick, hometeam) == false">',
'<input class="hradio" type="radio" name="gameradio{id}" value="{hometeam}"/>',
'</tpl>',
'<span class="line">{line}</span>',
'<tpl if="this.isPick(pick, visitorteam)">',
'<input class="vradio" type="radio" name="gameradio{id}" checked value="{visitorteam}"/>',
'</tpl>',
'<tpl if="this.isPick(pick, visitorteam) == false">',
'<input class="vradio" type="radio" name="gameradio{id}" value="{visitorteam}"/>',
'</tpl>',
'<span class="vteam">{visitorteam}</span>',
'<tpl if="isgameofweek">',
'<span class="gametime gow-cell">{gametime}</span>',
'</tpl>',
'<tpl if="isgameofweek == false">',
'<span class="gametime">{gametime}</span>',
'</tpl>',
'</div>',
'</tpl>',
{
compiled: true,
isPick: function(pick, team) {
return pick == team;
}
}
)


I'm trying to make use of the ability to call a function but the function is never called. I set a break point on the return statement but it never gets there. My DataView gets populated with all the contents of each row except the 2 radio inputs for each row. There are no errors being thrown either. Does anyone see what I'm missing?

The last condition of the template does work...it it applying the correct class to the last span element. Is there maybe another way to compare 2 values in the data row?

ShatyUT
31 Dec 2010, 4:55 PM
I'm still unsure why my "if" statements are not calling the isPick method but I have reworked my template to achieve the same results in a different way with less lines of code by executing javascript code inline:



new Ext.XTemplate(
'<tpl for=".">',
'<div class="game-wrap" id="gamerow{id}">',
'<span class="hteam">{hometeam}</span>',
'<input class="hradio" type="radio" name="gameradio{id}" {[this.radioChecked(values.pick, values.hometeam)]} value="{hometeam}"/>',
'<span class="line">{line}</span>',
'<input class="vradio" type="radio" name="gameradio{id}" {[this.radioChecked(values.pick, values.visitorteam)]} value="{visitorteam}"/>',
'<span class="vteam">{visitorteam}</span>',
'<span class="{[this.gametimeClasses(values.isgameofweek)]}">{gametime}</span>',
'</div>',
'</tpl>',
{
radioChecked: function(pick, team) {
if (pick == team)
return 'checked';
else
return '';
},
gametimeClasses: function(gow) {
var classes = ['gametime'];
if (gow)
classes.push('gow-cell')
return classes.join(" ");
}
}
)