underscore.js nested templates

Question

Is it possible to somehow take a DOM element from a underscore template and use it as another template?

The idea is that my app needs to render a document that contains

Answer 1

Instead of loading it all at once as one template and then trying to load a portion of it again later, separate them as multiple templates.

Have your main document-template and a summary-template. The initial load pulls in the document-template and then pulls into the summary-template and inserts it into the compiled DOM from the first template. Then you can reload the second template at any time. See the following steps:

1) Load initial template, shown below:

2) Once this is compiled into the DOM, load the second template via underscore, shown below:

3) Call $("#document").append(summaryTemplate), or whatever variable is holding the compiled template.

4) Repeat steps 2 and 3 any time you need to reload the summary, except first remove the existing $("#summary") before appending again

You can use this same strategy for the items as well, just make sure you use the correct jQuery selectors/methods so that you're overwriting the existing divs in the correct order, as append will only work for adding something to the end of an element.