Including a template in JsRender

Question

I am using JsRender to construct my HTML page and I would like to be able to achieve the following.

<script id="qtype" type="text/x-jsrender">
   <li class="question-container" data-type="{{:Question.Type}}">
       {{include tmpl="#inner-template"/}}
   </li>
</script>

What I would like to be able to do is to base the inner template inclusion upon some property within the model being rendered. For example, if my model has a property named 'Type' the following, whilst invalid synax, explains the requirement (hopefully)

{{include tmpl=:"#" + Question.Type}}

or, perhaps, using a 'helper' method:

{{include tmpl=~GetTemplateName(Question.Type)}}

I have tried adding the template name to the model, but I couldn't get that to work for the include statement:

{{include tmpl=templateName/}}

Can anyone tell me if this is possible, or perhaps an alternative suggestion?

Thanks.

Stephen Collins Stephen Collins · Accepted Answer · 2013-03-20T12:58:04

I've been using the most recent builds and this approach works juse fine:

For inline templates:

// given an inline template named 'myTmpl'
{{for myModel.someProperty tmpl="#myTmpl" /}}

For compiled templates:

// given a compiles template named 'myTmpl'
{{for myModel.someProperty tmpl="myTmpl" /}}

I think what you are missing in your code is the quotes. Whether it is a compile template or inline template you still need them. I'm not sure if the "include" keyword is still supported, but using a {{for /}} works just fine whether the model passed into it is an array or not. The thing is, jsRender treats everything you pass into it as an array, but only renders it once if it contains only one value.

Also, ensure that you are compiling your templates correctly. I used a utility function to compile all of them beforehand:

function () {
    return $.when(
        $.get(getPath("templateOne")),
        $.get(getPath("templateTwo"))
    )
    .done(function (one, two) {
        $.templates({
            tmplOne: one[0],
            tmplTwo: one[0]
        });
    });
}

This creates two compile templates with the names "tmplOne" and "tmplTwo" which you can use in your other templates.

One thig to note, however is that compilation takes time. If you try to use a template before it is compiled, jsRender won't know about it yet and have some really strange behavior. Hence returning a Promise to ensure that I don't use a template before it is compiled:

compileTemplates().done(function() {
    // do my work with compile templates here.
}).fail(function() {  /* handle failure */ });

Including a template in JsRender

2 Answers