Writing a jQuery widget: Templating

Question

I'm doing my first major jQuery development. It's a Widget for recurring events, and is as such a fairly complex beast. The full code is available at https://github.com/collective/jquery.recurrenceinput.js for those who want to check it out. I appreciate any kind of feedback about any part of the code, so anyone who wants to take a look at it, that would be awesome.

I have a couple of specific questions, and it seems best to put them as separate posts, and here is the second one:

I have several big snippets of HTML and I'm using jQuery templating for this. My question is on the best way to include these templates. Currently I'm using two different ways, and none of them are obviously better than any other.

In one case I use a string literal:

var OCCURRENCE_TMPL = ['<div class="recurrenceinput_occurrences"><hr/>',
    '{{each occurrences}}',
        '<div class="occurrence>',
            '<span class="date ${occurrences[$index].type}">',
                '${occurrences[$index].formatted_date}',
            '</span>',
            '<span class="action">',
                '{{if occurrences[$index].type === "rrule"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Exclude',
                    '</a>',
                '{{/if}}',
                '{{if occurrences[$index].type === "rdate"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Remove',
                    '</a>',
                '{{/if}}',
                '{{if occurrences[$index].type === "exdate"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Include',
                    '</a>',
                '{{/if}}',
            '</span>',
        '</div>',
    '{{/each}}',
    '<div class="batching">',
        '{{each batch.batches}}',
            '{{if $index === batch.current_batch}}<span class="current">{{/if}}',
                '<a href="#" start="${batch.batches[$index][0]}">[${batch.batches[$index][0]} - ${batch.batches[$index][1]}]</a>',
            '{{if $index === batch.current_batch}}</span>{{/if}}',
        '{{/each}}',
    '</div></div>'].join('\n');

$.template('occurrence_tmpl', OCCURRENCE_TMPL);

OK, so strictly it's an array of string literals, but that's to make JSLint happy. I then use this:

result = $.tmpl('occurrence_tmpl', data);
occurrence_div = form.find('.recurrenceinput_occurrences');
occurrence_div.replaceWith(result);

This is neat and simple, but the result is a lot of HTML inline. One of the templates is 219 lines long... :-)

The other technique I use is to include the template as if it is a script in the HTML:

<script id="jquery-recurrenceinput-form-tmpl" type="text/x-jquery-tmpl" src="../src/jquery.recurrenceinput.form.js" ></script>

And I load that HTML via ajax, stick it in a variable and make a template of it:

    if ($.template.recurrenceinput_form === undefined) {
        $.ajax({
            url: $(conf.template.form)[0].src,
            async: false,
            success: function (data) {
                conf.template.form = data;
            },
            error: function (request, status, error) {
                alert(error.message + ": " + error.filename);
            }
        });
        $(conf.template.form).template('recurrenceinput_form');
    }

And I can then use that:

form = $.tmpl('recurrenceinput_form', conf);
overlay_conf = $.extend(conf.form_overlay, {});
form.overlay().hide();

This means I don't have the template inline, which is good, but it also means using the Widget is a bit more involved as you need the tag in the HTML, which is bad, and it is a bit of a horrid hack.

Opinions on this is welcome, and even more welcome would be a third way that doesn't suck. :-)

Answer 1

I think loading the templates via AJAX is an elegant solution.

The idea of using a <script>-tag with a non-standard type is also applied in this example from the YUI 3 documentation. Your idea to use AJAX to load it is, in my opinion, a much cleaner solution to this dirty problem.

Answer 2

You might want to consider using a toolkit geared towards this sort of thing so you don't have to re-do it yourself. With Dojo it's really easy to create custom widgets, they cache the html, etc (using templates). I heard JQuery was going to implement the AMD define/require standard so you could probably mix the toolkits if you wanted to without too much hassle. If not though it'd be worth looking at how they did it.

Answer 3

I agree, the string literal in JS is unwieldy. And requesting the HTML via Ajax is more than you need.

The simplest thing is to insert the template on the page as HTML. Can you include the template on your page, not as Javascript, but as HTML? As in,

<div style="display: none">
  <div class="recurrenceinput_occurrences"><hr/>
    {{each occurrences}}
     <div class="occurrence>
        <span class="date ${occurrences[$index].type}">
     ...
</div>

You can either use this as a template, and insert the results of the evaluation into the DOM elsewhere. Or, in some cases, insert it back where it was on the page (and don't use the display: none).