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
./
├── All.js
├── All.less
└── styleguide/
├── _group/
│ └── Images.json
├── chefs/
│ ├── Chefs.hbs
│ ├── Chefs.json
| | {
| | “_include”: ”/_group/Images.json”,
| | “_key”: 0
| | }
│ └── Chefs.less
└── recipes/
├── Recipes.hbs
├── Recipes.json
| {
| “_include”: ”/_group/Images.json”,
| “_key”: 2
| }
└── 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
[
{
"_template": "/path/Image.hbs",
"src": "/otherPath/porridge-too-hot.png"
},
{
"_template": "/path/Image.hbs",
"src": "/otherPath/porridge-too-cold.png"
},
{
"_template": "/path/Image.hbs",
"src": "/otherPath/porridge-just-right.png"
}
]
Step 2: Include low-level data file in parent
Include one of the low-level data files in your parent data file.
{
"_template": "Goldilocks.hbs",
"illustration": {
"_include": "/_group/Images.json",
"_key": 2
}
}
-
Indicates the associated template is
Goldilocks.hbs
. -
Indicates that illustration is populated by the third template (counting from 0) defined in the file
Images.json
.
See also: