Паттерн Лаб / Усы - передача данных по частям атому из организма
Я использую шаблонную лабораторию с усами у организма, который представляет собой форму, полную атомов, которые являются компонентами ввода html ({{>atoms-input-text}}
).
каждый input-text
атом имеет структуру JSON, как это:
"inputText": {
"name": "example_input",
"label": "Text Input Label",
"placeholder": "Placeholder",
"error": "This is an error message."
},
И форма имеет структуру json, которую я мог бы изменить, например так:
(form-onboarding.form-fields.json
)
{
"name_first": {
"name": "name_first",
"label": "First Name",
"placeholder": "First Name"
},
"name_last": {
"name": "name_last",
"label": "Last Name",
"placeholder": "Last Name"
},
"address_street": {
"name": "address_street",
"label": "Street Name",
"placeholder": "Street Name"
},
"address_suite": {
"name": "address_suite",
"label": "Suite",
"placeholder": "Suite"
},
"address_city": {
"name": "address_city",
"label": "City",
"placeholder": "City"
},
"address_state": {
"name": "address_state",
"label": "State",
"placeholder": "State"
},
"address_zip": {
"name": "address_zip",
"label": "Zipcode",
"placeholder": "Zipcode"
}
}
Мой руль для формы выглядит так:
(form-onboarding.mustache
):
<div class="form-onboarding">
<div class="row">
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<div class="form-onboarding__header-row">
{{> atoms-header-logo}}
</div>
<div class="form-onboarding__input-container">
<div class="row form-onboarding__input-row">
<div class="col-sm-12 col-md-6">
{{> atoms-input-text}}
</div>
<div class="col-sm-12 col-md-6">
{{> atoms-input-text}}
</div>
</div>
<div class="row form-onboarding__input-row">
<div class="col-sm-12 col-md-9 col-lg-8">
{{> atoms-input-text}}
</div>
<div class="col-sm-12 col-md-3 col-lg-4">
{{> atoms-input-text}}
</div>
</div>
<div class="row form-onboarding__input-row">
<div class="col-sm-12 col-md-6">
{{> atoms-input-text}}
</div>
<div class="col-sm-6 col-md-3 col-lg-2">
{{> atoms-input-text}}
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
{{> atoms-input-text}}
</div>
</div>
</div>
</div>
</div>
</div>
Как передать каждому входному текстовому компоненту необходимый ему json, либо явно, либо в последовательном порядке?