JQuery and Templates

jQuery, Tutorials Comments Off on JQuery and Templates

In this article, I want to show you how to use a template in JQuery. It is a best practice to not embed the html codes in the JavaScript code. Using this best practice makes the code clearer and also more maintainable.Using template is one neat approach for applying this best practice.

To use template in JQuery, I suggest one to use the jsrender library. You can download it from:

Jsrender library

The library is under development and it is possible the style will not valid in the future so I attached the library at the end of this post.

Suppose one has a multilingual web page like the below page. He or she needs to use different labels on the page for each language.

<form id="addContactForm">
    <table>
        <tr><td>Contact Name:</td><td><input id="txtContactName" name="txtContactName" type="text" /></td></tr>
        <tr><td>Contact Title:</td><td><input id="txtContactTitle" name="txtContactTitle" type="text" /></td></tr>
        <tr>
            <td colspan="2">
                <span id="cancelBtn" title = "cancle"  class="cancelBtn" />
                <span id="submitBtn" title="submit" class="submitBtn"  />
            </td>
        </tr>
    </table>
</form>

One approach is to write the program like this:

var langEn = {
contactName: 'Contact Name',
contactTitle: 'Contact Title'
}

var html = '<tr><td>' + langEn.contactName + ':</td><td><input id="txtContactName" name="txtContactName" type="text" /></td></tr>';
html += '<tr><td>'+langEn.contactTitle'+:</td><td><input id="txtContactTitle" name="txtContactTitle" type="text" /></td></tr>';
$('#addContactForm table' + self.id).html(html);

This approach is not maintainable, because after awhile one could not edit the code very easily. Another approach is to use templates. One first creates a template file which is actually an html file with some placeholders. Placeholders are those parts of the html page that he or she wants to change it in different languages.

<form id="addContactForm">
    <table>
        <tr><td>{{>contactName}}:</td><td><input id="txtContactName" name="txtContactName" type="text" /></td></tr>
        <tr><td>{{>contactTitle}}:</td><td><input id="txtContactTitle" name="txtContactTitle" type="text" /></td></tr>
        <tr>
            <td colspan="2">
                <span id="cancelBtn" title = "cancle"  class="cancelBtn" />
                <span id="submitBtn" title="submit" class="submitBtn"  />
            </td>
        </tr>
    </table>
</form>

The placeholder in jsrender is specified like this: {{>contactName}}
After that one could get the html content of the template and generate the English version of the template like this:

var tmpl = $.templates(AddContactFormHtmlTemplate);
var createContactMgmtPage = tmpl.render([langEn]);
$('#addContactForm table' + self.id).html(createContactMgmtPage);

I hope you could see the power of using templates from this simple example.

Jsrender Library v1.0pre

The following two tabs change content below.

Amir

Latest posts by Amir (see all)

Comments are closed.