Question

After I call render on my jsRender template, it seems to be consumed, and thus is removed from the DOM. This is frustrating as I have a page where the template needs to be rendered several times depending on user interaction.

console.log($('#tpl'));
$('#container').html($('#tpl').render(json));
console.log($('#tpl'));

The second console.log is an empty array, and I can confirm the template no longer exists using the DOM inspector and the exception that jsRender throws: Uncaught JsRender Error: Unknown template: "#tpl" — the page must be reloaded to re-inject the template into the DOM.

How can I persist the jsRender template between renderings?

Answer 1

I’m still not sure why it has to be consumed and simply can’t stay in the DOM after rendering the first time, but I found a workaround. If anybody knows the reason for removing the template from the DOM, I’m still interested.

Update: Actual answer (Thanks, Boris)

My template was within my #container element, so the html() method was of course overwriting it. Silly me.

Workaround Neat little trick anyway

Using this ‘variant’ example, I saved the template in a local variable. Then I call render on the variable name instead of the jQuery selector:

var tpl = $.templates('#tpl');

.
.
.

console.log(tpl);
$('#container').html(tpl.render(json));
console.log(tpl);

This has also managed to preserve the template across renderings.