How does Partials / Template inheritance work in Mustache?

Question

I don't really understand partials / template inheritance from Mustache / Hogan.js. As defined here and here you seem to must have two different files to make that work. I use it as follows in my (client side) page:

<template id="server-template"> {{#servers}} <b>some html and {{> some other which I dont understand how to use}}</b> {{/servers}} </template> <template id="room-template"> I want this in up there. (in the "partials" tag) </template>

Thanks for helping. I compile them with this:

var source = $('#room-template').html(), compiled = Hogan.compile(source) $('#main').html(compiled.render(data))

Is that even possible?

Answer 1

The docs state that you must compile your partials separately, and then pass them to the render function:

In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

var roomTemplateSource = $('#room-template').html();
var roomTemplate = Mustache.compile(roomTemplateSource);
Mustache.render(template, view, {
  room: roomTemplate
});

<template id="server-template">
        {{#servers}}
        <b>some html and {{> room}}</b>
        {{/servers}}
</template>