使用Chevron渲染页面时Mustache.js渲染函数返回空字符串求助

核心是前后端Mustache渲染冲突：Python的Chevron会先对整个页面做Mustache渲染，你写的{{food}}在后端渲染阶段就被解析了，但后端上下文里没有food变量，所以被替换成空字符串。等前端Mustache.js执行时，拿到的模板已经是空的，自然渲染不出内容。而独立HTML没有后端渲染步骤，模板能被正常识别。

以下是几种可行的解决办法，根据你的架构选择：

1. 转义前端模板标签 #

在后端模板中，把前端要使用的Mustache标签转义，让Chevron不解析它们。Chevron支持通过反斜杠转义大括号：

<!-- 后端模板里写这个 -->
\{\{food\}\}

Chevron渲染后会输出原始的{{food}}，前端Mustache.js就能正常识别并渲染。

2. 前后端使用不同的分隔符 #

让后端和前端的Mustache使用不同的标签分隔符，避免互相干扰：

• 后端改分隔符：在页面模板开头添加Chevron的分隔符声明，比如改用<% %>作为后端标签：

  {{=<% %>=}}
  <!-- 后端变量用<% %>，比如：<% backend_var %> -->
  <!-- 前端依然用{{ }}，不会被后端解析 -->
  {{food}}
  

• 前端改分隔符：通过Mustache.js修改前端的标签分隔符，比如改用[[ ]]：

  // 初始化时修改前端Mustache的标签
  Mustache.tags = ['[[', ']]'];
  // 渲染时使用新标签
  const newHTML = Mustache.render("[[food]]", { food: "tacos" });
  

3. 将前端模板放在不受后端渲染的容器中 #

把前端模板放在<script type="text/template">标签内，Chevron默认不会解析这类script标签的内容：

<script id="frontend-template" type="text/template">
  {{food}}
</script>

前端获取模板并渲染：

const template = document.getElementById('frontend-template').innerHTML;
const newHTML = Mustache.render(template, { food: "tacos" });

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