handlebars.js – 如何连接并将Handlebars变量传递给partial

2019年7月28日 287次阅读

这是我们的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 {{this}}.class}}来代替{{errors.fullName.class}}.

我们发现Handlebars不允许您以这种方式引用车把声明中的另一个车把变量.

它都在每个循环中：

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

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

最佳答案 我假设您传递给把手的数据对象看起来像这样：

{
  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}}
点赞