Skip to content

Instantly share code, notes, and snippets.

@peterwilsoncc
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterwilsoncc/78249a13ae6d1f6a13c0 to your computer and use it in GitHub Desktop.
Save peterwilsoncc/78249a13ae6d1f6a13c0 to your computer and use it in GitHub Desktop.
Pattern lab data file question. Is it possible to include the same atom multiple times & have a json file deal with it?
{
"forms" : {
"textInput" : {
"name" : "textInput", // needs to differ for each instance
"id" : "textInput" // needs to differ for each instance
}
}
}
// some code in here to allow for multiple instances
// of the same atom in the template.
{{> atom-text-input-field }}
{{> atom-text-input-field }}
{{> atom-text-input-field }}
{{> atom-text-input-field }}
{{> atom-text-input-field }}
{{> atom-text-input-field }}
<div class="{{ forms.textInput.class }} ">
<label class="{{ forms.textInput.label.class }}" for="{{ forms.textInput.id }}">{{ forms.textInput.label.text }}</label>
{{# forms.textInput.error }}
<span class="{{ forms.textInput.error.class }}">{{ forms.textInput.error.text }}</span>
{{/ forms.textInput.error }}
<input type="{{ forms.textInput.type }}" name="{{ forms.textInput.name }}" id="{{ forms.textInput.id }}" class="{{ forms.textInput.field.class }}" placeholder="{{ forms.textInput.field.placeholder }}" size="{{ forms.textInput.field.cols }}" value="{{ forms.textInput.field.value }}" />
</div>
{
"forms" : {
"textInput" : {
"class" : "input-set",
"type" : "text",
"name" : "textInput",
"id" : "textInput",
"label" : {
"text" : "Text input",
"class" : "input-set__label"
},
"field" : {
"class" : "input-text",
"placeholder" : "Placeholder text",
"cols" : 50,
"rows" : 1,
"value" : ""
}
}
}
}
@dmolsen
Copy link

dmolsen commented Aug 20, 2014

To provide separate data for each pattern you'd have to use pattern parameters. In this case it's going to feel verbose but it's the only option I have with Mustache. I need to dig into it more to figure out how I can do something smarter. So for this you could do:

  {{> atom-text-input-field("forms.textInput.name": "name1", "forms.textInput.id": "id1") }}
  {{> atom-text-input-field("forms.textInput.name": "name2", "forms.textInput.id": "id2") }}
  {{> atom-text-input-field("forms.textInput.name": "name3", "forms.textInput.id": "id3") }}
  {{> atom-text-input-field("forms.textInput.name": "name4", "forms.textInput.id": "id4") }}
  {{> atom-text-input-field("forms.textInput.name": "name5", "forms.textInput.id": "id5") }}
  {{> atom-text-input-field("forms.textInput.name": "name6", "forms.textInput.id": "id6") }}

Like I said, it can get really long with the nesting but that's how it'd work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment