Last active
August 29, 2015 14:05
-
-
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?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{> atom-text-input-field }} | |
{{> atom-text-input-field }} | |
{{> atom-text-input-field }} | |
{{> atom-text-input-field }} | |
{{> atom-text-input-field }} | |
{{> atom-text-input-field }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" : "" | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
Like I said, it can get really long with the nesting but that's how it'd work.