JsRender: A template in a template

Question

I have an issue with templates inside of templates in jsrender. Or rather, it actually does work, as long as I have it in script blocks on the page, like so:

<script id="template_1" type="text/x-jsrender">
<h2>{{>Title}}</h2>
<ul>    
    {{for Details tmpl="#template_2" /}}
</ul>
</script>

<script id="template_2" type="text/x-jsrender">
<li>
    {{>Headline}} - {{>Text}}
</li>
</script>

However, when I wish to move template_2 to an external file to use other places, I cannot seem to have it work again. I tried creating another tag in the direction of:

$.views.converters({
    insertDetailList: function (data) {
        $.get('/templates/_details.tmpl.htm', null, function (template) {

        var tmpl = $.templates(template);


        });
    }
});

When I return the template however (rendered or not), it returns 'undefined'. Any ideas for how to get this to work? I have plenty of templates with this setup that I would like to have exported to separate files for use in more places :)

are you opposed to defining your script blocks in an external .js file that you just include into your current page? If not you, can just use the script block id with an accessor and render 'normally'. $( "#template_2" ).render( data ); — Tim A
For compiling templates from strings, and having them reference each other, see: stackoverflow.com/questions/26762525/… - — BorisMoore

Stephen Collins Stephen Collins · Accepted Answer · 2013-01-18T23:19:33

I'm not sure if this helps, but this was my approach...

// in a utility .js file
compileTemplates = function () {
    $.when(
        $.get(getPath("MyTableTemplate")),
        $.get(getPath("MyRowTemplate"))
    )
    .done(function (table, row) {
        $.templates({
            tmplTable: table[0],
            tmplRow: row[0]
        });
    });

...then just nest them as usual...

<tbody>
    {{for MyItems tmpl='tmplRow' /}}
</tbody>

I then make a call to compileTemplates before rendering and jsRender figures out the names and renders accordingly.

JsRender: A template in a template

1 Answers