Jsrender绑定含空格JSON到input时内容截断的解决求助

问题根源 #

• 第一种带引号的写法中，JSON.stringify输出的转义双引号\"会被浏览器解析为value属性的闭合标记，导致属性值仅到第一个{后就截断。
• 第二种去掉引号的写法中，空格会被HTML识别为属性分隔符，johnny后的空格使得depp"}"被当成新属性，最终val()只能获取到空格前的内容。

正确解决方法 #

方法1：使用Jsrender的HTML转义插值（推荐）

用{{>}}语法替代{{*:}}，它会自动将JSON字符串中的特殊字符（双引号、空格等）转译为HTML实体，确保浏览器完整识别value内容：

{{for items}}
  <input type="text" id="item-{{:id}}" value="{{>JSON.stringify(data)}}" />
{{/for}}

注：循环中避免使用固定id，改成动态id如item-{{:id}}，符合HTML规范且避免DOM操作冲突。

方法2：自定义辅助函数转义特殊字符

定义一个全局辅助函数处理JSON字符串的双引号转义：

$.views.helpers({
  escapeJsonForAttr: function(data) {
    return JSON.stringify(data).replace(/"/g, '"');
  }
});

模板中调用该函数：

{{for items}}
  <input type="text" id="item-{{:id}}" value="{{:~escapeJsonForAttr(data)}}" />
{{/for}}

方法3：使用Jsrender属性绑定语法

利用Jsrender的属性绑定语法直接赋值，无需手动处理转义：

{{for items}}
  <input type="text" id="item-{{:id}}" {{:~attr("value", JSON.stringify(data))}} />
{{/for}}

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