Question

这是我们的Handlebars部分我们称之为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不允许您以这种方式引用车把声明中的另一个车把变量。

它们都在每个循环中：

{{#each otherOccupiers}}
   {{> input-field}}
{{/each}}

有没有人知道如何实现这种效果，可能是通过编写把手辅助函数或其他方式来执行此连接。

Answer 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}}

如何连接并将Handlebars变量传递给部分

1 个答案: