I am using underscore.js templating and I am finding that I need logic in my templates to control their rendering. One example might be to ensure the state of a form is retained and rendered correctly across a template re-render.
Does anyone have any tips on how best to reduce the logic in my templates? Is this even a desireable goal?
I typically do this with Backbone which saves some effort but since it's not mentioned in your question here's a brief example of how I might use a logicless form template and mantain the values using only underscore and jQuery:
var app = {}; //namespace
app.formData = {};
app.template = '<form id="form"><input type="text" id="first" value="<%= first %>" /><input type="text" id="second" value="<%= second %>" />';
app.storeFormData = function() {
if ($('#form').length) {
$('#form input').each(function() {
app.formData[$(this).attr('id')] = $(this).val();
});
} else { //initialize formData object for first render
var form = $(app.template);
form.find('input').each(function() {
app.formData[$(this).attr('id')] = '';
});
}
};
app.render = function() {
console.log('rendering');
app.storeFormData(); //stash current state of form before re-rendering
$('#formDiv').html(_.template(app.template, app.formData));
_.each(app.formData, function(val, id) {
$('#'+id).val(val);
});
};
setInterval(app.render, 5000);
This code will automatically redraw the form every 5 seconds, and stashes the form state in memory before doing so, with a completely logicless template. Very simplistic example, but hopefully it gives you some ideas to run with.
