XTemplate use conditional logic

[friedc]

hi,

i want to use some conditional logic in my XTemplate code like this,


...
'<tpl for="." if="premium == true">',
...but i recognize that this is just ignored.

i've got a ModelData class with a boolean property called "premium". i want to render some additional html code, if this flag is set to true.

the template code begins like that:


return ['<tpl for=".">',
'<div class="wrap" style="border: 1px solid white">',
'<div class="thumb"><img src="{thumbnailPath}" title="{displayName}" width="
{thumbnailWidth}" height="{thumbnailHeight}" /></div>',

'<tpl for="." if="premium == true">',
'<span class="info-title">{displayName:htmlEncode}<img src="{premiumPath}"/>
</span>',
'</tpl>',
....i have also implemented an explicit getter method in the ModelData for the poroperty "premium" which returns a Boolean value.
it always happens that the conditional part is skipped, and the code inside is not rendered.

has anybody an idea? i'm not familiar with this
for="." attribute but if i leave it, it makes no difference.

tia, chris

[josch1710]

for="." iterates over the array, that was given to that XTemplate.
What you want to do is:


<tpl for=".">
<tpl if="premium == true">
..
</tpl>
</tpl>


The API documentation of XTemplate is quite elaborate on the possibilities, so check that out.

[Martin.Trummer]

the api-doc sucks: http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/core/XTemplate.html
so I guess, you mean another api-doc - could you pleas provide a link

[friedc]

i have had a look at the ext 2.2.1 docs at:

http://extjs.com/deploy/dev/docs/ (search for XTemplate then)

and found the solution you provided. as mentioned in my first post, i already tried it but without success.

even if i write

<tpl if="premium == true">
..
</tpl>

the elements inside this statements won't be rendered.

is there a pitfall anywhere? do i have to provide something special in the modeldata class?

[josch1710]

@Martin. Sorry, I meant the ExtJS Api docs, not the GXT ones.

@friedc. Can you please post an example of the data you apply to the XTemplate?

[friedc]

this is not the whole code, but all the important information concerning this issue.
i use the following modelData class for filling the template:


public class SearchResultModelData extends BaseModel{

public MyModelData(Boolean isPremium){
...
set("premium", isPremium);
...
}
}could there be a problem with Boolean and boolean? (i just tried to switch with boolean - with no effect)

[josch1710]

I think, the correct template code would be like this (also look at the comments):



'<tpl for=".">', // Iterate over the collection
'<div class="wrap" style="border: 1px solid white">',
'<div class="thumb"><img src="{thumbnailPath}" title="{displayName}" width="
{thumbnailWidth}" height="{thumbnailHeight}" /></div>',

'<tpl if="premium == true">', // If this entry is premium, display info
'<span class="info-title">{displayName:htmlEncode}<img src="{premiumPath}"/>
</span>',
'</tpl>',
'</tpl>'

[jonjanisch]

I had this issue today. The ExtJS API docs weren't very helpful since the docs basically have the same code as what's posted here.

I had to wrap the true and false values in single quotes.

So instead of:



<tpl if="premium == true">it should be:



<tpl if="premium == 'true'"> If your template String is returned from a native javascript method, make sure you escape the single quotes like this:



private native String getTemplate() /*-{
var html = [
'<tpl for=".">',
'<div class="x-combo-list-item">',
'<tpl if="enabled == \'true\'"><p>ENABLED!</p></tpl>',
'<tpl if="enabled == \'false\'"><p>DISABLED!</p></tpl>',
'</div>',
'</tpl>',
];
return html.join("");
}-*/;
Yes, this took me quite some time to figure out. It should be documented... somewhere. GXT's XTemplate javadoc would be a good place.

[friedc]

thank you for your reply!

i had a workaround for my problem above - but now i really need the conditional logic. yes this issue should really be explained in the the documentation - which could be a lot better.

cheers

[pabloflores]

hi, i am having a hard time trying to get something "simple" to work.
the conditionals are always acting as if they are true.
my template is coming from html
hasData has the right value, and they are boolean.. its part of the objected passed on
template.append(el, o);

<td
<span >
<tpl if="{hasData} == 'true'">
{total_Total} ({total_Total_Percent}) {hasData}
</tpl>
<tpl if="{hasData} == 'false'">
Please refresh.
</tpl>
</span></td>

i've tried
if="hasData == 'true'
if =hasData ==true
if ={hasData=='true'}..
i've also sorrounded it by "tpl for="."

help would be appreciated..

[Martin.Trummer]

hm - this should work:


<tpl if="hasData == 'true'">

can you post the complete template code?
are you constructing it in a java function or via JSNI (native)?

[Martin.Trummer]

If you are using GXT 2.x you may be interessted in this post:
http://www.extjs.com/forum/showthread.php?p=390674#post390674