handlebars.js - 如何将 Handlebars 变量连接并传递到部分变量中

Question

这是我们称为 input-field 的 Handlebars 部分.我们正在尝试根据上一页选择的参与者数量动态创建姓名和电子邮件字段。

<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 辅助函数或其他一些方法来执行这种连接。

Answer 1

我假设您传递给 Handlebars 的数据对象如下所示:

{
  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 循环:

{{#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}}