Паттерн Лаб / Усы - передача данных по частям атому из организма

Я использую шаблонную лабораторию с усами у организма, который представляет собой форму, полную атомов, которые являются компонентами ввода 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, либо явно, либо в последовательном порядке?

0 ответов

Другие вопросы по тегам