Templating without looping

[patspam]

I normally get a designer to skin my webapps using a templating language such as Perl's HTML::Template (http://search.cpan.org/~samtregar/HTML-Template-2.9/Template.pm). which allows the designer to skin my site without seeing or understanding any of my code. It doesn't have any of the cool Ext.Template formatting functions but it does let you do simple If/Else and Looping. I'd really like to achieve the same sort of thing using Ext.Template but I'm not quite sure how to go about doing it.

For example I have a simple web service that returns a list of search results.
The HTML::Template way is to use HTML::Template on the server to return a formatted HTML string from the web service.
Say I change my web service to return JSON data. Ext.JsonView lets me very easily combine the json data and a template to get the equivalent formatted HTML, but how can I move the Template out of my javascript code into a separate file so that my designer can skin my site without getting lost in code?
They can skin an individual search result item:

'<li id="{id}">{foo} - {bar}</li>'
But what about the content before/after all of the list items? Do I have to get them to provide separate template strings for each of these, as well as separate template string for error conditions etc..? The problem is that the looping logic is in my code and not in the template.

There's also the question of where you actually put these template strings, do you embed them in hidden DIVs etc.. I found this post (http://extjs.com/forum/showthread.php?t=581&highlight=template+looping) which suggests that embedded templates in HTML would not be a good idea.

I'm just starting to come to grips to ext so apologies if there's a good way to do this already.

Thanks,

Patrick

[aconran]

If you want to store your template markup in HTML you are best off placing this in a display: none textarea as suggested in the docs here:
http://extjs.com/deploy/ext/docs/output/Ext.Template.html#Template.from

You can utilize the static method "from" to pull the data out of the textarea. When browsers see malformed markup such as li's in div's without a ul sometimes they will throw the invalid pieces out. This can potentially break your templates. However browsers won't touch textareas.


The problem is that the looping logic is in my code and not in the template.
This seems like it would be a good thing to me? The designer shouldn't care about the code but just the markup.

Have you looked into the MasterTemplate class for your looping?

[patspam]

Thanks aconran, MasterTemplate looks great, will satisfy all my looping needs. Awesome!

What about basic If/Else? I agree you wouldn't want to put application logic into the template, but it's quite common to have two different appearances based on a boolean condition so simple logic is very useful. For example:

If searchResults == 0
.. print something like "No results found"
Else
.. templated list of results..

I guess I could use MasterTemplate for this? Eg.

var t = new Ext.MasterTemplate(
'<div name="{Results}">',
'<tpl name="noResultsFound">No Results Found</tpl>',
'<tpl name="resultsFound">...</tpl>',
'</div>'
);

And in code enable/disable the appropriate sections.

Or for simpler cases write my own formatting functions that perform logic to determine their output?

[GalaxySong]

I guess you have to make If/Else in your js code and either condition leads to one template. Just take this as CSS: if you hover a button, the style rule "button:hover" make effect and if you leave it, "button". You don't write such codes in a single style rule:

button{
if(hover){
}
else{
}
}As to seperate templates from html pages, my solution (propabably, ineffective) is as follows:
(1) I write templates into files named like "xxx.htm".
(2) When the html page is loaded, preload them in an Ajax way and store them as string propreties of an json object jTpl. Their property names (just like ids) are their urls.
(3) Make a template by new Ext.Template(jTpl["xxx.htm"]).
Acturally, what I do is more complex than the above. I am still looking for better alternatives as well.
If you need advanced style freedom, you may need XSL/XSLT.