Enduro.js中Handlebars用变量调用对象键实现多语言页面的问题

首先得明确一个核心问题：Handlebars模板是在服务器端编译渲染的，而你写在<script>里的selectedLanguage是客户端浏览器运行时的变量——服务器渲染页面的时候，这个变量还不存在，所以直接在模板里引用它肯定不会生效。

下面给你两种实用的解决方案，根据你的场景选择：

方案1：服务器端传入语言变量（适合静态/预渲染场景） #

如果你的语言选择是在页面加载前确定的（比如从URL参数、Cookie或者用户请求头获取），可以在Enduro.js的页面数据逻辑里把语言变量传入模板上下文：

1. 在你的页面对应的data文件（比如index.js）里添加逻辑：

module.exports = function (req, res, next) {
  // 这里可以从URL参数获取，比如访问 /?lang=ger
  const selectedLanguage = req.query.lang || 'eng'; // 默认英语

  // 把语言变量挂载到模板上下文
  res.locals.selectedLanguage = selectedLanguage;
  
  // 甚至可以直接把当前语言的文本整理好传过去，简化模板写法
  res.locals.currentText = res.locals.text[selectedLanguage];

  next();
};

2. 然后在模板里就可以直接使用了：

<!-- 两种写法都可以 -->
<h1>{{lookup text selectedLanguage}}</h1>
<!-- 或者更简洁的 -->
<h1>{{currentText}}</h1>

这样服务器渲染时就会根据获取到的语言参数，生成对应语言的页面内容。

方案2：客户端动态切换语言（无需重新加载页面） #

如果需要用户在页面上切换语言（比如点击按钮切换德/英语），那得把所有语言的文本预渲染到页面中，再用JS动态替换：

1. 模板里预存所有语言的文本，同时渲染默认语言内容：

<!-- 隐藏容器存储所有语言数据 -->
<div id="lang-store" style="display: none;" 
     data-eng="{{text.eng}}" 
     data-ger="{{text.ger}}"></div>

<!-- 默认显示英语标题 -->
<h1 id="page-title">{{text.eng}}</h1>

<!-- 切换按钮示例 -->
<button onclick="switchLang('eng')">English</button>
<button onclick="switchLang('ger')">Deutsch</button>

2. 添加客户端JS逻辑处理切换：

const langStore = document.getElementById('lang-store');
const pageTitle = document.getElementById('page-title');

// 切换语言的函数
function switchLang(lang) {
  // 从存储容器里获取对应语言的文本
  const newText = langStore.dataset[lang];
  // 更新DOM内容
  pageTitle.textContent = newText;
  // 可以把选择的语言存在localStorage，下次页面加载自动应用
  localStorage.setItem('selected-lang', lang);
}

// 页面加载时，检查本地存储的语言偏好
window.onload = function() {
  const savedLang = localStorage.getItem('selected-lang') || 'eng';
  switchLang(savedLang);
};

这种方式不需要重新请求服务器，用户体验更流畅，适合交互式的多语言切换场景。

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