使用Handlebars与handlebars-intl自定义格式时触发引用错误排查

核心问题：Intl 配置的传递键名错误 #

你遇到的两个报错本质上是同一个原因：handlebars-intl 无法读取到你定义的自定义格式配置。

看你 renderTemplate 函数里的代码：

$('#template').append(handlebarsTemplate(item, { data: { intlData }}));

这里你把配置对象的键设成了 intlData，但 handlebars-intl 内部是从 options.data.intl 这个路径读取国际化配置的（对应你报错代码里的 var locales = options.data.intl && options.data.intl.locales;），所以它找不到你定义的 formats.number.CHF，进而引发连锁报错。

另外还有个小问题：你调用模板时传的第一个参数是 item，但函数接收的参数是 data，这里变量名不匹配，会导致模板里的 Amount 变量无法正确获取到值（这也可能是第二个报错的诱因之一）。

修正后的代码 #

把这两处错误修正后，代码就能正常工作了：

$(document).ready(function () {
  HandlebarsIntl.registerWith(Handlebars);
  renderTemplate(@Html.Raw(Json.Encode(Model)))
});

var templateSource = $('#deals-template').html();
var handlebarsTemplate = Handlebars.compile(templateSource);
var intlData = { 
  "locales": "de-CH", 
  "formats": { 
    "number": { 
      "CHF": { "style": "currency", "currency": "CHF" }, 
      "percentage": { "style": "percent" } 
    } 
  } 
};

function renderTemplate(data) {
  // 修正点1：将intlData改为intl键名；修正点2：把item换成data
  $('#template').append(handlebarsTemplate(data, { data: { intl: intlData } }));
});

额外验证点 #

1. 确保模板里的变量名和数据中的键一致：比如你用 {{formatNumber Amount "CHF"}}，要确认你的 data 对象里确实有 Amount 字段，且值是数字类型（你说测试数据是100000，这点应该没问题，但可以再确认）。
2. 如果你还是有疑问，可以在 formatNumber 函数里临时加日志，打印 options.data 看看是否能拿到 intl 对象：

   console.log(options.data); // 应该能看到intl字段包含你的locales和formats
   

这样修改后，{{formatNumber Amount "CHF"}} 就能正确识别你定义的CHF货币格式了。

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