How to make Resig's micro-templates XHTML compliant?

Question

Hello,

I have been experimenting with John Resig's micro-template, which works great. However, the mark-up will not pass the XHTML 1.0 Transitional validation test. (Among other things, id attributes yield errors.)

Replacing tags identifiers <, > with [[,]], passes validation. Thus, I created a js script which at load time (jQuery document ready) converts the square brackets back to regular markers. This works fine in FF, but not in IE, Chrome, etc.

Scripts embedded within CDATA tags validate as well.

Question: Is there a way to insert micro-template in a script and still pass XHTML validation? My idea was to remove the CDATA tags once the page has been loaded. But there are probably smarter ways. (Note: I'd prefer not to inject HTML via js since the mark-up will be difficult to maintain.)

PS: I looked at other js templates, but they are either not XHTML compliant or too bulky.

TIA for any hints.

Answer 1

Why are you going through the trouble of changing all the methods that use the micro-template, rather than changing the micro-template itself? It seems like a waste of processing to load everything a certain way, and then change it all just so it's compatible with the script.

Why not modify the original script to use [[ tags instead of the <% tags originally provided?

This is how it identifies the templates

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('');");

Now change the <% to [[ and >% to ]]

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

Thanks for your reply. Sorry, I was not more more explicit. The issue is not so much related to the <# #> tags as to the XHTML syntax requirements for mark-up embedded inside a "text/html" script.

For instance, simple expressions such as the declaration below generate XHTML validation errors when embedded in a type "text/html" script:

<script id="tplTest" type="text/html"> 
    <p id="msg">Hello</p> </script>

If the <, > markers are replaced by, say, double squared brackets [[,]], the expression validates.

As mentioned above, the conversion utility I created replaces all [[,]] brackets with the standard <,> markers. Applying the converter to the script above during the jQuery document ready event works in FF 3.0, Chrome 2.0, Safari 4.0, Opera 9.6 but not in IE 7.0. I will modify Resig's script to allow converting double squared brackets to regular <,> tags.

But if IE ignores the changes, than the issue is probably moot.

Answer 3

Try using CDATA.