Using Pattern Parameters

Important: Pattern parameters are supported by the Node Mustache PatternEngines. Other template languages provide better solutions to this problem.

Pattern parameters are a simple mechanism for replacing Mustache variables in an included pattern. They are limited to replacing variables in the included pattern and only the included pattern. They are especially useful when including a single pattern multiple times in a molecule, template, or page and you want to supply unique data to that pattern each time it's included. Pattern parameters do not currently support the following:

• sub-lists (e.g. iteration of a section),
• long strings of text (can be unwieldy)
• modifying/replacing variables in patterns included within the targeted pattern

Pattern parameters are Pattern Lab-specific, have no relationship to Mustache, and are implemented outside of Mustache. Learn more about pattern parameters:

• The Pattern Parameter Syntax
• Adding Pattern Parameters to Your Pattern Partial
• Toggling Sections with Pattern Parameters

The Pattern Parameter Syntaxpermalink

The attributes listed in the pattern parameters need to match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. For example:

{{> patternType-pattern(attribute1: value, attribute2: "value string") }}

Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.

Adding Pattern Parameters to Your Pattern Partialpermalink

Let's look at a simple example for how we might use pattern parameters. First we'll set-up a pattern that might be included multiple times. We'll make it a simple "message" pattern with a single Mustache variable of message.

<div class="message">{{ message }}</div>

We'll organize it under Atoms > Global and call it "message" so it'll have the pattern partial of atoms-message.

Now let's create a pattern that includes our message pattern partial multiple times. It might look like this.

<div class="main-container">
	{{> atoms-message }}
	<div>
		A bunch of extra information
	</div>
	{{> atoms-message }}
</div>

Using data.json or a pattern-specific JSON file we wouldn't be able to supply separate messages to each pattern partial. For example, if we defined message in our data.json as "this is an alert" then "this is an alert" would show up twice when our parent pattern was rendered.

Instead we can use pattern parameters to supply unique messages for each instance. So let's show what that would look like:

<div class="main-container">
	{{> atoms-message(message: "this is an alert message") }}
	<div>
		A bunch of extra information
	</div>
	{{> atoms-message(message: "this is an informational message") }}
</div>

Now each pattern would have its very own message.

Toggling Sections with Pattern Parameterspermalink

While pattern parameters are not a one-to-one match for Mustache they do offer the ability to toggle sections of content. For example we might have the following in a generic header pattern called organisms-header:

<div class="main-container">
	{{# emergency }}
	<div class="alert">Emergency!!!</div>
	{{/ emergency }}
	<div class="header">
		... stuff ...
	</div>
</div>

We call the header pattern in a template like so:

{{> organisms-header }}
... stuff ...

By default, if we don't have an emergency attribute in our data.json or the pattern-specific JSON file for the template the emergency alert will never be rendered. Instead of modifying either of those two files we can use a boolean pattern param to show it instead like so:

{{> organisms-header(emergency: true) }}
... stuff ...

Again, because pattern parameters aren't leveraging Mustache this may not fit the normal Mustache workflow. We still wanted to offer a way to quickly turn on and off sections of an included pattern.