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. :-)