JSP页面点击菜单项重渲染模板时显示#theContent的问题咨询

出现点击菜单项后页面显示#theContent的核心原因是：JsRender无法找到指定的模板元素，于是将选择器字符串#theContent当作模板内容直接渲染输出。

常见触发场景及解决办法 #

1. 模板元素被初始渲染覆盖
   如果你把模板元素（比如<script id="theContent" type="text/x-jsrender">...</script>）放在了#mainBody容器内部，第一次执行$("#mainBody").html(htmlOutput)时，会将#mainBody内的所有内容（包括模板元素）完全替换。后续点击事件触发时，$.templates("#theContent")找不到对应的模板元素，就会把选择器本身当作模板渲染。

   解决办法：

   • 将模板元素移到#mainBody外部，确保它不会被渲染结果覆盖：

     <!-- 模板放在mainBody外面 -->
     <script id="theContent" type="text/x-jsrender">
       <!-- 你的模板内容 -->
     </script>
     <div id="mainBody"></div>
     

   • 或者在#mainBody内单独划分一个子容器用于渲染内容，保留模板元素：

     <div id="mainBody">
       <script id="theContent" type="text/x-jsrender">...</script>
       <!-- 只替换这个子容器的内容 -->
       <div id="renderTarget"></div>
     </div>
     

     渲染时改为：

     $("#renderTarget").html(htmlOutput);
     

2. 未缓存模板对象，重复查找导致失败
   每次触发请求都重新调用$.templates("#theContent")查找模板，一旦模板元素被意外移除就会出错。

   解决办法：
   在页面初始化时提前缓存模板对象，后续直接复用：

   // 页面加载时缓存模板，只执行一次
   var contentTemplate = $.templates("#theContent");
   
   // 初始加载逻辑
   $.getJSON("/somelocation/test.json", function(data) {
       var htmlOutput = contentTemplate.render(data, {selectedValue: "abc"});
       $("#mainBody").html(htmlOutput);
   });
   
   // 菜单项点击逻辑
   $(".menu-item").click(function() {
       $.getJSON("/somelocation/your-data.json", function(data) {
           var htmlOutput = contentTemplate.render(data, {selectedValue: "your-value"});
           $("#mainBody").html(htmlOutput);
       });
   });
   

3. 模板选择器拼写错误
   虽然你说用了相同逻辑，但仍需确认点击事件中的选择器是否和模板元素的id完全一致（注意大小写、特殊字符）。

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