How can I use a nested template within mustache? Is there a way to do the same?

var tmpl="{{#data}} 
{{values}}
Name: {{name}}
//{{another_templ({{name.value}})}}
{{/values}}
{{/data}}"

Hope you guys got the question. I have not added the escape character for js validity since code is split across different lines.

How can I use a nested template within mustache? Is there a way to do the same?

var tmpl="{{#data}} 
{{values}}
Name: {{name}}
//{{another_templ({{name.value}})}}
{{/values}}
{{/data}}"

Hope you guys got the question. I have not added the escape character for js validity since code is split across different lines.

• javascript
• template-engine
• mustache

• 2 Why don't you use partials? mustache.github.io/mustache.5.html#Partials – Pere Commented Jul 28, 2016 at 8:14

3 Answers 3

You could use a lambda to nest the template:

function nested_template(template_string, translate) {
  return function() {
    return function(text, render) {
      return Mustache.to_html(template_string, translate(render(text)));
    };
  };
}

var template_string = 
  "{{#data}}"+
    "{{values}}"+
      "Name: {{name}}"+
      "{{#another_templ}}{{name}}{{/another_templ}}"+
    "{{/values}}"+
  "{{/data}}";

var another_template_string = "<b>{{name}}</b>"; // for example

var view = {
  data: {
    values: {
      name: "Test"
    }
  },
  another_templ: nested_template(another_template_string, function(text) {
    return {name: text};
  });
};

var result = Mustache.to_html(template_string, view);

I have made an example of nested templates over at jsFiddle. Here it is in detail:

First, set up your HTML

<div class="main"><!-- content here --></div>

<script type="text/html" id="tpl">
    {{#data}}
        {{#names}}
            Name: {{name}}
            {{#nested}}{{name}}{{/nested}}<br>
        {{/names}}
    {{/data}}
</script>

<script type="text/html" id="tpl-nested">
    &mdash; <b>{{name}}</b>
</script>​

Then the javascript (using jQuery)

function renderNested(template_string, translate) {
    return function() {
        return function(text, render) {
            return Mustache.to_html(template_string, translate(render(text)));
        };
    };
}

var template = $("#tpl").html();

var nested_template = $("#tpl-nested").html();

var model = {
    data: {
        names: [
            { name: "Foo" },
            { name: "Bar" }
        ],
        nested: renderNested(nested_template, function(text) {
            return { name: text };
        })
    }
};

var result = Mustache.to_html(template, model);

$(".main").html( result );

Here is a method where we do string replacement before we compile the templates. Subtemplates are called in the templates by: {{#template}}insertTheNameOfYourSubTemplateHere{{/template}}

templates = {}

function compileTemplates(templateNamesArray) {
    for (index in templateNamesArray) {
        var templateName = templateNamesArray[index];
        var baseHTML = $('#' + templateName).html();

        var start = baseHTML.indexOf("{{#template}}");
        while(start != -1) {
            var end = baseHTML.indexOf('{{/template}}', start);
            var nestedTemplateName = baseHTML.slice(start + "{{#template}}".length, end);
            var nestedTemplateEl = $('#' + nestedTemplateName);
            if (nestedTemplateEl.length == 0) {
                throw "Could not find nested template '" + nestedTemplateName + "' for the template '" + templateName + "'";
            }
            baseHTML = baseHTML.slice(0, start) + nestedTemplateEl.html() + baseHTML.slice(end + '{{/template}}'.length);
            start = baseHTML.indexOf("{{#template}}", start);
        }
        templates[templateName] = Handlebars.compile(baseHTML);
    }
}

compileTemplates(["templateActiveThreadTab", "templateActiveThreadContent", "templateTodoItem"]);