Micro templates for JS – Specifications

Introduction

When implementing client-side Javascript applications, we commonly have to dynamically create areas (panels, forms…) according to UI events.
The naive approach might consist in building the corresponding content as string and adding it to the target element. With JQuery, such approach might be implemented as described below:

var content = "";
content += ""+title+"";
content += "<input type="\"text\"" value="\""+title+"\"/" />";
var targetElement = $("#targetDiv");
target.html(content);

As you can see, the content isn’t very complicated but there are a lot a string concatenation, some escape characters for “”. So suc code isn’t really readable and it is even more the case when the area is more complex. Moreover we can’t see simply how the area looks…

So we need something more convenient for such issue. The solution is micro template and there are some tools addressing that:

• http://www.west-wind.com/weblog/posts/2008/Oct/13/Client-Templating-with-jQuery
• http://ejohn.org/blog/javascript-micro-templating/

Whereas such solutions appear to be interesting, we want to have a full control on the template manipulation. Here is the specification of what we expect.

Specifications

First of all, start with the template structure. The first template focuses the supported expressions:

<div id="id1" style="display:none;">
    <span id="resource.{resourceId}.method.{methodId}">Test</span>
    <span id="resource.{resourceId}.method.{methodId}-loading">Loading</span>
    <p id="para-{resourceId}">A paragraph</p>
    <div>
        <p id="para-{resourceId}">A paragraph</p>
        <div>
            <p id="para-{resourceId}">A paragraph</p>
        </div>
        <select>
            <option value="" selected="{selectId=='10'? 'true':null}"></option>
        </select>
    </div>
</div>

The second template focuses the supported control structures:

<div id="id2" style="display:none;">
    <span id="resource.{resourceId}.method.{methodId}">Test</span>
    <span id="resource.{resourceId}.method.{methodId}-loading">Loading</span>
    <p id="para-{resourceId}">A paragraph</p>
    <div>
        <p id="para-{resourceId}">A paragraph</p>
        <div>
            <p id="para-{resourceId}">A paragraph</p>
        </div>
        <te:if test="{elements.length>0">
        <select>
            <te:for elements="${elements}" item="element">
            <option value="{element.value}"
                selected="{element.id=='10'? 'true':null}"></option>
            </te:for>
        </select>
        </te:if>
    </div>
</div>

Let’s describe now more in details the capabilities regarding control structures:

• test: <te:if> tag with test attribute for the condition. Any supported expression is allowed at this level. A <#else> tag can be also used. If the condition is true, the content of the <#if> tag is displayed. The opposite is true for the <#else> tag.
• loop: <te:for> tag. The list is referenced through the elements attributes, the current element name with the element attribute and the current element index in array with the index attribute.

The expressions are divided into two families:

• Simple expressions related to values. We can distinguish values like ‘my value’ (string), true|false (boolean) and 10 (number) and references ${myVariable} and ${myobj.myvalue}. The references are resolved using elements putting in the template model.
• Expressions for condition. They both correspond to unary conditions or binary conditions. Any simple expression are supported for condition elements. For binary conditions, following operators are supported: ==, !=, >, = and <=.

You can notice that compact condition can be used within attribute values. This allows simply changing value with a condition. The value can be set to null. In this case, the attribute is automatically removed from its owner tag. Sample is shown below:

<option value="{element.value}" selected="{element.id=='10'? 'true':null}"></option>

Moreover Web browsers don’t allow specifying control tags within select tags. For this reason, a quick loop structure is provided for a single template tag. Simply add items and item tags on the current tag. The latter is now considered as the template.

<select>
    <option items="{elements}" item="element" value="{element.id}">{element.name}</option>
</select>