JsRender模板绑定onclick调用JS函数引号冲突致语法错误的解决方法

• 对JsRender语法的基础认知偏差
  JsRender的标准占位符语法是{{:字段名}}，不识别${}格式的占位符。你之前的写法本质是用ES6字符串模板手动拼接HTML，不是JsRender的标准用法，渲染时不会自动对占位符的内容做转义处理，很容易破坏HTML结构。
• 引号嵌套逻辑完全错位
  当前写法在单引号包裹的onclick属性段内，直接嵌套双引号包裹字符串参数，模板占位符替换为实际值后，引号配对直接断裂。浏览器HTML解析器遇到属性值内部的引号会提前截断属性边界，最终生成的畸形DOM和你贴出的渲染结果完全一致：原本完整的displayDiv(this.id, "pending")字符串被拆成碎片，后半段被识别为无意义的自定义属性，点击时自然抛出Unexpected end of input语法错误。
• 硬拼内联事件的写法对新手极不友好
  把带逻辑的JS代码直接硬编码在HTML属性里，本身就需要处理多层引号嵌套、HTML实体转义、JS语法转义的多重问题，新手写的时候很容易出现引号配对错误，还会引入不必要的XSS风险。

方案1：用JsRender规范写法+事件委托绑定（最推荐） #

彻底放弃在onclick属性里硬拼字符串参数的写法，把需要传递的Status值存在元素的自定义data属性里，统一绑定点击事件，从根源上规避引号冲突：
模板部分修改为：

<script id="testTemplate" type="text/x-template">
   <div class="btn-action">
      <button 
        class="js-action-btn"
        data-status="{{:Status}}" 
        id="temp-{{:tempId}}">
        <i class="material-icons">more_vert</i>
      </button>
    </div>
</script>

渲染完成后统一绑定点击逻辑，不需要每个按钮单独写内联事件：

// 全局监听点击事件，匹配按钮元素触发逻辑
document.addEventListener('click', function(e) {
  const actionBtn = e.target.closest('.js-action-btn');
  if (!actionBtn) return;
  // 从按钮元素上取id和存储的status值传给目标函数
  displayDiv(actionBtn.id, actionBtn.dataset.status);
});

这种写法完全不存在多层引号嵌套的问题，也符合JsRender的设计逻辑，同时能减少重复的事件绑定代码。

方案2：必须保留内联onclick时的修正写法 #

如果一定要使用内联onclick的写法，绝对不能直接把原始的Status字符串值直接塞到onclick的参数里，而是通过data属性取值，绕开嵌套问题：

<script id="testTemplate" type="text/x-template">
   <div class="btn-action">
      <button 
        onclick='displayDiv(this.id, this.dataset.status)'
        data-status="{{:Status}}"
        id="temp-{{:tempId}}">
        <i class="material-icons">more_vert</i>
      </button>
    </div>
</script>

如果一定要直接把Status作为参数传给onclick，必须用JsRender的转义语法对字符串做JS转义，保证字符串内的引号、特殊字符被正确转义为可在JS字符串内使用的序列，绝对不能直接输出原始字符串值。

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