templating without a templating framework

[Eli Cochran]

I'm thinking about how I want to handle the lightweight templates that  
we use in our components. I'm not speaking here about any heavy-weight  
data-driven templating such as what is being done with sData in Sakai.  
I think that there is place for that. But this is for the little  
pieces of DOM that we need to instantiate as we do stuff.

Such as in the the Uploader where we build out a table row for each  
file in the file queue:

	<tr id="SWFUpload_0_0">
		<td scope="row" class="fileName">Photo 1.jpg</td>
		<td class="fileSize">44 KB</td>
		<td class="fileStatus">Ready to Upload</td>
		<td class="fileRemove"><button class="removeFileBtn" type="button"/ 
 ></td>
	</tr>

Which we're currently building dynamically as a string in the  
createFileQueuedHandler function:

	var queue_row = $('<tr id="' + file.id + '">' +
	'<td class="fileName" scope="row">' +
	file.name +
	'</td>' +
	'<td class="fileSize">' +
	fluid.utils.filesizeStr(file.size) +
	'</td>' +
	'<td class="fileStatus">Ready to Upload</td>' +
	'<td class="fileRemove"><button type="button" class="removeFileBtn" / 
 ></td></tr>');

Obviously this needs to be pulled out of the main code into something  
easy to customize and replace.

But should it be carried around in the DOM or should it be somewhere  
in the JS code. Both are equally easy to code and maintain.

JS code advantage: Everything is in one place. No extra HTML on the  
page, and what will be on the page will only be instantiated if needed.

HTML/DOM advantage: Most of the time we need to have HTML on the page  
anyway. Designers can easily see and manipulate the template. The  
clone() function. [OK, if you don't know jQuery, that might be lost on  
you]

Forgive me for thinking all this out on list.

I think I'm sold on putting the  in the HTML. Should we wrap all our  
client-side templates in some agreed upon class name?

<div class="fluid-client-side-templates">
	<div id="fluid-uploader-row-tmplt">
		<table>
			<tr class="upload-row">...</tr>
		</table>
	</div>
</div>

- Eli


. . . . . . . . . . .  .  .   .    .      .         .              .                     .

Eli Cochran
user interaction developer
ETS, UC Berkeley


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20080520/c3d213d4/attachment.html>