Aller au contenu | Aller au menu | Aller à la recherche


Imagine you have some javascript data. And imagine you need to generate some xul tags from this data. The traditionnal way is to use DOM objects, with document.createElement, and setAttribute, appendChild method etc... If you have many data, the amount of code to write could be high. Very high. And it becomes difficult to debug it, to have a general view of your xml tree that you generate etc.

Another way is to use the jsTemplateBuilder object.

That's an object that generate XUL tag for you (or any other XML dialect). Pass it your javascript data (strings, objects, arrays etc..), a template file, and a DOM element where to insert the generated content. And jsTemplateBuilder will work for you.

Here is an example of a template file :

<?xml version="1.0"?>
     <attribute name="flex" value="aFlexValue" />
       <attribute name="context" value="aContextPopupValue" />

      <xul:columns >
        <xul:column />
        <xul:column />


   <foreach from="firstname" item="aLabel" key="aKey">
           <if condition="aLabel == '' ">
                   <xul:description value="This is an empty value !" />
                   <xul:description jstpl:attribute="value=aLabel" />
           <xul:description jstpl:attribute="value=aKey" />

You can see that this file contains XUL tags. These tags will be instantiated in the resulting document (In the example above, it generates a XUL grid). But some of them will be generated many times (or not) because of some specific tags like <foreach>, <if> etc. In fact, if you know the syntax of some PHP template engine, like smarty, you won't have difficulties understanding it.

In this example, there is a foreach tag, showing the template engine that it must iterate over an array (or object) named here "firstname". Each value in the array will be stored in an "aLabel" variable, and its key (a integer for an array, or the name of a property for an object) will be stored in the "aKey" variable (the key attribute is optional). So, for each item in the example above, a row element and some description elements will be generated.

The if tag allows to create elements based on conditions. Conditions are javascript expressions, in which you can use some variables like aLabel.

There are other tags, like the <attribute> tag, to assign an attribute to a generated element, its value coming from a variable. To learn other tags, please see the documentation.

Now, let's must instantiate a jsTemplateBuilder object.

 var jstpl = new jsTemplateBuilder();

Next, let's assign some variables that will be used in the template :

 jstpl.assign('aContextPopupValue', 'mypopup');
 jstpl.assign('firstname', ['Laurent','Daniel','', 'Tristan']);

Finally, we call the build method to generate the content from the given template into the given DOM element. The last argument says if we want to destroy all children of this element before inserting the generated content.'mytemplate.jstpl', document.getElementById('anyelement'), true);

Please note the alternative grammar: just give the id of the element instead of the element itself'mytemplate.jstpl', 'anyelement', true);

And that's all !

jsTemplateBuilder is a javascript object and needs chrome privileges to run.

(c) Disruptive Innovations 2004

You can download it on my web site.


1. Le mercredi, août 18 2004, 14:29 par renaud

Wow really really useful ! I can't see any lack in it by now ; the smarty-like syntax is just excellent. Really impatient to test it for real. Congrats and thank you

2. Le mercredi, août 18 2004, 17:00 par mat

Tu pourrais 1. Faire un zip se desarchivant dans un repertoire précis 2. Mettre une licence

Merci :)

3. Le mercredi, août 18 2004, 21:37 par LaurentJ

mat : ok j'ai rajouté le texte de la licence et repackager dans un repertoire

4. Le vendredi, septembre 17 2004, 02:04 par me

is it possible to have templates stored in db? i'm struggling with trying to convert a string (which is a template) into a workable template.

if you have any idea to help.


5. Le samedi, septembre 18 2004, 00:25 par me

i found out about the DOMParser() object.

maybe you can add this functionality to jstemplatebuilder which by the way is really great and helped me a lot.