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

Playground

/////// TEMPLATES //////

    var mainTemplate = "
 \
                          <% _.each(items, function(item) { %> \
                               <%= listItem({item:item}) %> \
                          <% }); %> \
                        
";
    
    var subTemplate = '
<%=item %>
';


/////// MODEL (our data) //////

    var model = {
        items : [1,2,3,4,5]
    }

    
/////// COMPILE //////

    // add the subTemplate to the model data, to be passed to the mainTemplate
    model.listItem = _.template(subTemplate);
    
    // Render main template to the DOM
    document.body.innerHTML = _.template(mainTemplate, model);