Как объединить и передать вниз переменную руля в частичное


Это наша часть руля, которую мы назвали input-field.
мы пытаемся динамически создавать поля имени и электронной почты на основе количества участников, выбранных на предыдущей странице.

<div class="form-group {{errors.fullName.class}}" id="fullName">
  <label for="full-name">Your full name</label>
  <p class="message-error">{{errors.fullName.message}}</p>
  <input type="text" class="form-control" name="fullName" value="{{values.fullName}}">
</div>

У нас есть некоторые функции, которые создают и отображают сообщения об ошибках, если какие-либо из этих полей формы не заполнены.
вместо {{errors.fullName.class}} нам нужно, чтобы это было {{errors.fullName{{this}}.class}}.

Мы обнаружили, что Handlebars не позволяет ссылаться на другую переменную handlebars внутри оператора handlebars. путь.

Это все в пределах каждого цикла:

{{#each otherOccupiers}}
   {{> input-field}}
{{/each}} 
Есть ли у кого-нибудь идея о том, как достичь этого эффекта, возможно, написав вспомогательную функцию handlebars или каким-либо другим способом выполнить эту конкатенацию.
1 4

1 ответ:

Я предполагаю, что объект данных, который вы передаете рулю, выглядит примерно так:

{
  otherOccupiers: ["A", "B"],
  errors: {
    fullName: {
      class: "error-class",
      message: "error-message"
    }
  }
}

Однако, если вы измените структуру вашего объекта данных, чтобы выглядеть примерно так:

{
  errors: {
    otherOccupiers: [
      "A" : {
        fullName: {
          class: "error-class",
          message: "error-message"
        }
      }
      "B" : {
        fullName: {
          class: "error-class",
          message: "error-message"
        }
      }
    ]
  }
}

Затем вы можете сделать каждый цикл следующим образом:

{{#each errors.otherOccupiers}}
  <div class="form-group {{this.fullName.class}}" id="fullName">
    <label for="full-name">Your full name</label>
    <p class="message-error">{{this.fullName.message}}</p>
    <input type="text" class="form-control" name="fullName">
  </div>
{{/each}}