如何在Handlebars中根据下拉框选中值传参Helper并填充用户邮箱？

问题描述 #

我希望在Handlebars模板中，当下拉选择框选中用户ID后，自动加载对应用户的邮箱地址到输入框中。现有表单代码和Handlebars Helper如下：

表单代码 #

<div class="row">
    <div class="col-lg-6">
        <label class="form-control-label" for="form-select">User</label>
        <select class="form-select" aria-label="Default select example">
            {{#each users}}
                <option value="{{_id}}">{{_id}} - {{name}}</option>
            {{/each}}
        </select>
    </div>
    <div class="col-lg-6">
        <div class="form-group">
            <label class="form-control-label" for="input-email">{{selectedUser _id}}</label>
            <input type="email" id="input-email" class="form-control" placeholder="jesse@example.com" value="">
        </div>
    </div>
</div> 

已创建的Handlebars Helper #

selectedUser: (option) => {
    return User.findOne({ _id: option });
},

需要实现的是：将下拉框选中的ID传递给Helper，或者实现选中后自动填充邮箱的功能。

解决方案 #

首先明确：Handlebars的Helper是服务端渲染阶段执行的，无法直接响应前端下拉框的实时选择操作。要实现实时填充，必须结合前端JavaScript；如果只是页面初始渲染时填充默认用户的邮箱，才需要用到异步Helper。

方法一：前端JS实时监听下拉选择（推荐，适合交互场景） #

这种方法不需要依赖Helper，直接在前端获取预存的邮箱数据，实时填充：

1. 修改表单代码：给下拉框添加ID，同时在<option>中通过自定义属性data-email存储对应用户的邮箱：

<div class="row">
    <div class="col-lg-6">
        <label class="form-control-label" for="user-select">User</label>
        <!-- 给select加id，方便JS获取 -->
        <select id="user-select" class="form-select" aria-label="Default select example">
            {{#each users}}
                <!-- 添加data-email属性存储邮箱 -->
                <option value="{{_id}}" data-email="{{email}}">{{_id}} - {{name}}</option>
            {{/each}}
        </select>
    </div>
    <div class="col-lg-6">
        <div class="form-group">
            <label class="form-control-label" for="input-email">用户邮箱</label>
            <input type="email" id="input-email" class="form-control" placeholder="jesse@example.com" value="">
        </div>
    </div>
</div> 

2. 添加前端监听脚本：监听下拉框的change事件，获取选中项的邮箱并填充到输入框：

// 获取下拉框和输入框元素
const userSelect = document.getElementById('user-select');
const emailInput = document.getElementById('input-email');

// 监听选择变化事件
userSelect.addEventListener('change', function() {
    // 获取当前选中的option
    const selectedOption = this.selectedOptions[0];
    // 从data-email属性中取出邮箱，填充到输入框
    emailInput.value = selectedOption.dataset.email || '';
});

// 页面加载完成时，默认填充第一个用户的邮箱（可选）
window.addEventListener('load', function() {
    const firstOption = userSelect.options[0];
    if (firstOption) {
        emailInput.value = firstOption.dataset.email || '';
    }
});

方法二：服务端异步Helper实现初始渲染（仅适合默认值填充） #

如果需要在页面加载时默认显示某个用户的邮箱，需要将Helper改为异步（因为User.findOne是异步操作），并在模板中传递默认选中的ID：

1. 修改Handlebars异步Helper：

// 注册异步Helper，注意要使用async/await
handlebars.registerHelper('selectedUser', async function(option) {
    const user = await User.findOne({ _id: option });
    return user ? user.email : '';
});

2. 在模板中传递默认选中的ID：
   假设服务端渲染时，把默认选中的用户ID存在defaultUserId变量中，模板中调用Helper：

<input type="email" id="input-email" class="form-control" placeholder="jesse@example.com" value="{{selectedUser defaultUserId}}">

注意：这种方法只能实现页面初始时的填充，无法响应前端下拉框的实时选择，所以还是推荐方法一。

内容的提问来源于stack exchange，提问作者Anon