Pattern Data

At some point, you'll probably want to override global data and partial data for specific patterns. This is done by creating a JSON file with the same name as the pattern and putting it in the same directory. For example, if you wanted to provide pattern data for the article page, your pages directory would look like this:

article.mustache
article.json

Overriding the Default Variables

To override global data using pattern data, make sure the latter has the same key name as the former. For example, the global data may look like this:

source/_data/_data.json:
{
  "landscape": {
    "src": "../../_assets/src/fpo-landscape-4x3.jpg",
    "alt": "Landscape 4x3 Image"
  }
}

In the pattern data file article.json, copy that structure and provide pattern-specific information:

source/_patterns/04-pages/article.json:
{
  "landscape": {
    "src": "../../_assets/src/hero-image.jpg"
  }
}

The article pattern will now display a more specific image. All other patterns using {{ landscape.src }} will display the fpo (for placement only) image by default. Also note that we didn't override landscape.alt. The article pattern continues to use the global value "Landscape 4x3 Image".

Not only can we selectively exclude what we override, we can also add data unique to the pattern, and not a part of global or partial data.

source/_patterns/04-pages/article.json:
{
  "landscape": {
    "src": "../../_assets/src/hero-image.jpg"
  },
  "sub": {
    "src": "../../_assets/src/sub-image.jpg"
  },
  "dagwood": {
    "src": "../../_assets/src/dagwood-image.jpg"
  }
}

Working with Includes

A pattern will use its own pattern data, but not the pattern data for any included pattern. For example, the article page might include the block-hero compound. block-hero may have its own pattern data file block-hero.json, but the article page will not consult it. However, article.json can contain data to hydrate variables in block-hero.mustache, but only when viewed as part of the article.

For example, the following source files:

source/_patterns/04-pages/article.json:
{
  "landscape": {
    "src": "../../_assets/src/hero-image.jpg"
  }
}
source/_patterns/04-pages/article.mustache:
{{> compounds-block-hero }}
source/_patterns/01-compounds/block-hero.json:
{
  "landscape": {
    "src": "../../_assets/src/dagwood.jpg"
    "alt": "Dagwood"
  }
}
source/_patterns/01-compounds/block-hero.mustache:
<img src="{{ landscape.src }}" alt="{{ landscape.alt }}">

Would render:

URL /?p=pages-article
<img src="_assets/src/hero-image.jpg" alt="">
URL /?p=compounds-block-hero
<img src="_assets/src/dagwood.jpg" alt="Dagwood">