Question

我一直在试验John Resig's micro-template，效果很好。但是，标记不会通过XHTML 1.0 Transitional验证测试。（除其他外，id属性产生错误。）

替换标签标识符＆lt;，＆gt;用[[，]]传递验证。因此，我创建了一个js脚本，在加载时（jQuery文档就绪）将方括号转换回常规标记。这适用于FF，但不适用于IE，Chrome等。

CDATA标签中嵌入的脚本也会验证。

问题：有没有办法在脚本中插入微模板并仍然通过XHTML验证？我的想法是在页面加载后删除CDATA标签。但可能有更聪明的方法。（注意：我不希望通过js注入HTML，因为标记很难维护。）

PS：我查看了其他js模板，但它们要么不符合XHTML，要么太笨重。

任何提示的TIA。

Answer 1

为什么要经历更改使用微模板的所有方法的麻烦，而不是更改微模板本身？以某种方式加载所有内容似乎浪费处理，然后将其全部更改，以便与脚本兼容。

为什么不修改原始脚本以使用[[标记而不是最初提供的<%标记？

这是识别模板的方式

str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

现在将<%更改为[[，将>%更改为]]

str
          .replace(/[\r\t\n]/g, " ")
          .split("[[").join("\t")
          .replace(/((^|]])[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)]]/g, "',$1,'")
          .split("\t").join("');")
          .split("]]").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

Answer 2

尝试使用CDATA。

Answer 3

这是一个使用数组连接字符串的版本（并检查data = null）

var _out = [];
// check if the data is null and create an empty object 
_out[_out.length] = ('if (typeof data === "undefined" || data == null){  data = {}; }   ');
_out[_out.length] = ('var out=[];');
_out[_out.length] = ("out[out.length] = ' " );
_out[_out.length] =   str.replace(/[\r\t\n]/g, " ")
   .replace(/'(?=[^%]*\]\])/g,"\t")
   .split("'").join("\\'")
   .split("\t").join("'")
   .replace(/\[\[=(.+?)\]\]/g, "'; out[out.length] = $1; out[out.length] = '")
   .split("\[\[").join("';")
   .split("\]\]").join("out[out.length] ='");

   _out[_out.length] = "'; return out.join('');";

var value = _out.join('');
return new Function("data", value );

如何使Resig的微模板符合XHTML？

3 个答案: