Handlebars下拉框onchange事件处理器失效，如何修复及传值？

使用Express搭配Handlebars开发时，希望home.handlebars中的下拉框选中值变化时触发事件，在index.js中读取选中值。尝试在后端server.js中创建Handlebars helper并绑定到下拉框的onchange事件，但该helper未生效。相关代码如下：

server.js #

const express = require('express');
const app = express();
const handlebars = require('express-handlebars');
const port = 3000;
app.use(express.static('public'));
var handlebarsHelpers = handlebars.create({
    helpers: {
        dropdownChange:  function (value) {
            console.log("helper running.");
            console.log("value is " + value);
            return value;
        }
    }
});
app.engine('handlebars', handlebarsHelpers.engine);
app.set('view engine', 'handlebars');
app.set('views', './views');

app.get('/', (req, res) => {
    res.render('home', {layout: false});
});

<...>

app.listen(port, () => {
    console.log(`Server listening on port ${port}`)
});

index.js #

import * as d3 from "https://cdn.skypack.dev/d3@7";
import axios from 'https://cdn.skypack.dev/axios';

const dataSet = async function getData() {
    return await axios.get('/data');
}

var courseData = [];

function getNodes() {
    //************************getNodes is the function that should eventually read the dropdown value************************
}

async function drawGraph() {
    const data = await dataSet();
    console.log(data);

    courseData = data.data;
    console.log(courseData);

}
drawGraph();

home.handlebars #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graph Chart</title>
</head>
<body>
    <h2 align="center">Graph Chart</h2>
    <div>
        <select name="select" id="select" onchange={{dropdownChange value}}>
            <option value="">Select a course...</option>
            <option value="course1">course1</option>
            <option value="course2">course2</option>
        </select>
    </div>
    <svg class="prereq-graph"></svg>
</body>
</html>

<script type="module" src="./static/js/index.js"></script>

为什么Handlebars Helper失效？ #

Handlebars helper是后端渲染阶段执行的工具，它只在服务器生成HTML页面的时候运行一次，根本没法响应浏览器端的前端事件。你把helper绑定到onchange，相当于在渲染时直接把dropdownChange的返回值写进HTML里，而不是绑定一个能在浏览器触发的函数，所以下拉框变化时完全不会触发这个后端helper。

正确实现方式 #

1. 前端直接读取下拉框值（无需后端参与） #

如果只是需要在前端index.js里获取选中值，直接在前端监听onchange事件就行，完全不需要Handlebars helper：

修改home.handlebars的下拉框，去掉无效的helper绑定：

<select name="select" id="select">
    <option value="">Select a course...</option>
    <option value="course1">course1</option>
    <option value="course2">course2</option>
</select>

然后在index.js中添加事件监听逻辑：

// 获取下拉框元素
const selectEl = document.getElementById('select');

// 监听下拉框变化事件
selectEl.addEventListener('change', function() {
    const selectedValue = this.value;
    console.log('选中的值：', selectedValue);
    // 把选中值传入你需要的函数
    getNodes(selectedValue);
});

// 修改getNodes函数，接收选中值参数
function getNodes(selectedCourse) {
    console.log('当前选中课程：', selectedCourse);
    // 这里写后续业务逻辑
}

2. 把选中值传递到Express后端 #

如果需要把选中值发给后端处理，可以用你已经引入的axios发送请求：

在index.js的change事件里添加请求代码：

selectEl.addEventListener('change', async function() {
    const selectedValue = this.value;
    if (!selectedValue) return; // 空值不发送请求
    
    try {
        // 发送GET请求到后端接口
        const response = await axios.get('/api/course', {
            params: { course: selectedValue }
        });
        console.log('后端返回数据：', response.data);
        // 比如根据后端返回的数据重新绘制图表
        drawGraph(response.data);
    } catch (error) {
        console.error('请求失败：', error);
    }
});

然后在server.js中添加对应的接口：

// 处理课程选择的后端接口
app.get('/api/course', (req, res) => {
    const selectedCourse = req.query.course;
    console.log('后端接收到的课程：', selectedCourse);
    // 这里可以根据选中值做查询、数据处理等操作
    // 示例：返回模拟数据
    res.json({
        course: selectedCourse,
        data: ['相关数据1', '相关数据2']
    });
});

总结 #

• Handlebars helper是后端渲染工具，不能用来处理前端浏览器的交互事件。
• 前端事件逻辑必须放在前端JS文件（比如index.js）中实现。
• 需要和后端交互时，通过AJAX请求传递数据即可。

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