I'm having a bit of trouble with John Resig's Micro templating.

Can anyone help me with why it isn't working?

This is the template

<script type="text/html" id="row_tmpl">
test content {%=id%} {%=name%}
</script>

And the modified section of the engine

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

and the javascript

var dataObject = { "id": "27", "name": "some more content" };
var html = tmpl("row_tmpl", dataObject);

and the result, as you can see =id and =name seem to be in the wrong place? Apart from changing the template syntax blocks from <% %> to {% %} I haven't changed anything.

This is from Firefox.

Error: syntax error
Line: 30, Column: 89
Source Code:
var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push(' test content ');=idp.push(' ');=namep.push(' ');}return p.join('');

I'm having a bit of trouble with John Resig's Micro templating.

Can anyone help me with why it isn't working?

This is the template

<script type="text/html" id="row_tmpl">
test content {%=id%} {%=name%}
</script>

And the modified section of the engine

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

and the javascript

var dataObject = { "id": "27", "name": "some more content" };
var html = tmpl("row_tmpl", dataObject);

and the result, as you can see =id and =name seem to be in the wrong place? Apart from changing the template syntax blocks from <% %> to {% %} I haven't changed anything.

This is from Firefox.

Error: syntax error
Line: 30, Column: 89
Source Code:
var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push(' test content ');=idp.push(' ');=namep.push(' ');}return p.join('');

• javascript
• jquery
• ajax
• dom
• template-engine

• I got really confused when I got to the words, "the modified section of the engine." – Pointy Commented Apr 15, 2010 at 22:42

2 Answers 2

To change the tags in John Resig's Micro-Template Library, you must change two split() calls and the two regular expressions from the original code.

For example, changing the original tags <%= %> to {{= }} is done like so

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

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

Be carefull when changing regular expressions in the engine, you must escape special characteres. In javascript flavor of regexp, these are: \ / [ ] ( ) { } ? + * | . ^ $ Escape them by prefixing them with "\". This does not apply to the split params as they are not regexp in this case.

When you modified the engine, you forgot to change these lines:

  .replace(/((^|%>)[^\t]*)'/g, "$1\r")
  .replace(/\t=(.*?)%>/g, "',$1,'")

to this:

  .replace(/((^|%\})[^\t]*)'/g, "$1\r")
  .replace(/\t=(.*?)%\}/g, "',$1,'")