Reusing data files

You can promote the re-use of low-level data files by grouping them inside JSON arrays, one array per file. You store these files inside the directory styleguide/_group/, and then refer to the arrays’ elements from the parent data files.

Typical project structure

showLineNumbers

1
./
2
├── All.js
3
├── All.less
4
└── styleguide/
5
    ├── _group/
6
    │   └── Images.json
7
    ├── chefs/
8
    │   ├── Chefs.hbs
9
    │   ├── Chefs.json
10
    |   |     {
11
    |   |       “_include”: ”/_group/Images.json”,
12
    |   |       “_key”: 0
13
    |   |     }
14
    │   └── Chefs.less
15
    └── recipes/
16
        ├── Recipes.hbs
17
        ├── Recipes.json
18
        |     {
19
        |       “_include”: ”/_group/Images.json”,
20
        |       “_key”: 2
21
        |     }
22
        └── Recipes.less

In the previous illustration, the data files Chefs.json and Recipes.json have a stanza that refers to a file /_group/Images.json, which is an array of similar template definitions. Chefs.json incorporates the first element in the array; Recipes.json incorporates the third element.

This modulariztion helps to easily update parent data files; if you modify one of the data files in the directory _group/, all the referring data files inherit the modifications.

The following steps illustrate how to create a collection of low-level data files and how to refer to them in parent data files.

Step 1: Create a library of related low-level data files

In the directory styleguide/_group/, create a JSON file as an array of similar data files.

Images.json

showLineNumbers

1
[
2
  {
3
    "_template": "/path/Image.hbs",
4
    "src": "/otherPath/porridge-too-hot.png"
5
  },
6
  {
7
    "_template": "/path/Image.hbs",
8
    "src": "/otherPath/porridge-too-cold.png"
9
  },
10
  {
11
    "_template": "/path/Image.hbs",
12
    "src": "/otherPath/porridge-just-right.png"
13
  }
14
]

Step 2: Include low-level data file in parent

Include one of the low-level data files in your parent data file.

showLineNumbers {2,3}

1
{
2
  "_template": "Goldilocks.hbs",
3
  "illustration": {
4
    "_include": "/_group/Images.json",
5
    "_key": 2
6
  }
7
}

• 2. Indicates the associated template is Goldilocks.hbs.
• 3. Indicates that illustration is populated by the third template (counting from 0) defined in the file Images.json.

See also:

• Pathing for referred data files and templates