Use

This can be used to recursively render a template given a stop condition. Note that we use a key expression to set local scope. Also note it is a dot slash on the child key expression. The dot slash prevents walking up the scope. See Too Much Recursion for more details.

const grandpaWorm = new ObservableObject( {
    name: "Earthworm Jim",
    child: {
        name: "Grey Worm",
        child: {
            name: "MyDoom"
        }
    }
} );

const renderer = stache( `
  <span>{{name}}</span>
  {{#./child}}
    <div>
      {{>scope.view}}
    </div>
  {{/child}}
` );

const view = renderer( grandpaWorm );

The view variable will be the document fragment:

<span>Earthworm Jim</span>
<div>
    <span>Grey Worm</span>
    <div>
        <span>MyDoom</span>
    </div>
</div>

A template variable can be passed in

const grandpaWorm = new ObservableObject( {
    child: {
        name: "Earthworm Jim",
        hasArms: false,
        child: {
            name: "Grey Worm",
            child: {
                name: "MyDoom"
            }
        }
    }
} );

const renderer = stache( `
  <p>{{name}}</p>
  <p>{{hasArms}}</p>
  {{#./child}}
    <div>
      {{>scope.view}}
    </div>
  {{/child}}
` );

const view = renderer( grandpaWorm );

The view variable will be the document fragment:

<p>Earthworm Jim</p>
<p>false</p>
<div>
    <p>Grey Worm</p>
    <p>false</p>
    <div>
        <p>MyDoom</p>
        <p>false</p>
    </div>
</div>

For a more detailed explanation of using partials recursively see Too Much Recursion