Snippets

Snippets

Snippets are a special kind of subtemplate that are defined inline. Snippets are useful when multiple portions of a single template should reference the same logic or structure.

Creating Snippets

Snippets are similar to subtemplates but can be defined in the same file as where they are used.

Snippets are defined using the syntax

{#snippet snippetName}
  Snippet Content
{/snippet}

A common use of a snippet is to repeat portions of a template in two locations, for instance to display some content as a link if href is defined.

Snippet Location - Snippets are not dependent on the order they are included and can be defined either before and after where they are invoked.

{#if href}
  <a href={href}>
    {>content}
  </a>
{else}
  {>content}
{/if}

{#snippet content}
  {beforeText} {text} {afterText}
{/snippet}

Data Context

By default a snippet inherits its parents data context, but you can modify its data context by passing in data

{#snippet greeting}
  {greeting} {name}
{/snippet}

{> greeting greeting='hello' name='Sally'}
{> greeting greeting='goodbye' name='Sally'}

Snippet Example

This example shows a common pattern of using a snippet to define a table row