Skip to content

ANCHORED DOT pragma

Justin Hileman edited this page Aug 15, 2015 · 3 revisions

The {{% ANCHORED-DOT }} pragma enables anchoring tags to the top of the context stack. Just like {{ . }} resolves to the top of the context, {{ .name }} resolves to a property or method called name on the value at the top of the context stack.

If your rendering context looks like this:

[
  'title' => 'Mustache links',
  'links' => [
    ['href' => 'https://mustache.github.io'],
    ['href' => 'https://github.com/mustache/spec', 'title' => 'The Mustache spec'],
    ['href' => 'https://github.com/bobthecow/mustache.php', 'title' => 'Mustache.php'],
  ]
]

… and you wanted to render the list of links, you'd use a template like this:

<h1>{{ title }}</h1>
<ul>
  {{# links }}
    <li>
      <a href="{{ href }}">{{ title }}{{^ title }}{{ href }}{{/ title }}</a>
    </li>
  {{/ links }}
</ul>

But this wouldn't do what you'd expect. Rendering {{ href }} as a fallback for a missing title would never work, because Mustache would look up the context stack until it found a suitable title property to use. So our example would render as:

<h1>Mustache links</h1>
<ul>
  <li>
    <a href="https://mustache.github.io">Mustache links</a>
  </li>
  <li>
    <a href="https://github.com/mustache/spec">The Mustache spec</a>
  </li>
  <li>
    <a href="https://github.com/bobthecow/mustache.php">Mustache.php</a>
  </li>
</ul>

Without the {{% ANCHORED-DOT }} pragma, each link in the data we pass to our template has to have an empty title value to prevent a context stack lookup.

This template, however, renders exactly as you'd expect:

{{% ANCHORED-DOT }}
<h1>{{ title }}</h1>
<ul>
  {{# links }}
    <li>
      <a href="{{ href }}">{{ .title }}{{^ .title }}{{ href }}{{/ .title }}</a>
    </li>
  {{/ links }}
</ul>

And the output:

<h1>Mustache links</h1>
<ul>
  <li>
    <a href="https://mustache.github.io">https://mustache.github.io</a>
  </li>
  <li>
    <a href="https://github.com/mustache/spec">The Mustache spec</a>
  </li>
  <li>
    <a href="https://github.com/bobthecow/mustache.php">Mustache.php</a>
  </li>
</ul>