Nesting templates shows results + code

I have been checking out jQuery templates and they are pretty cool.

I am currently trying out nesting templates, and it almosts works -- I am see the expected generated results but also the jQuery code as well. I am generating a simple table with three different templates: table, row, and cell templates nested together.

Source view (using firebug) shows that the generated table is showing for each table row TR, the generated table cell TD is prefixed with jQuery template code

DIV id=divTest><TABLE> 
<TBODY> 
<TR>$('#RowTemplate').tmpl( { input_A: 
<TD><B>Hello A</B> </TD>} ).html()</TR> 
<TR>$('#RowTemplate').tmpl( { input_A: 
<TD><LABEL style="COLOR: blue">Hello B</LABEL> </TD> 
<TD><INPUT type=text></INPUT> </TD>} )</TR></TBODY></TABLE></DIV>

How I got it working thus far is that _JavaScript function templatetest() calls template addressEditTemplate which populates a table with templated rows using _getTemplateScript() .

There are two two templates _HelloATestTemplate & _HelloBTestTemplate that both use the templated table row RowTemplate, and each have a different nested templated to insert table cells _SimpleEntryTemplate and _TextBoxEntryTemplate.

<head> 
    <title>jQuery Templates</title> 
    <script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js " type="text/javascript"></script> 
    <script src=" http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js " type="text/javascript"></script> 
<script type="text/javascript"> 
  function get_TemplateScript(type) { 
    return '#' + type + '_TestTemplate'; 
  } 
</script> 
<script id="Simple_EntryTemplate" type="text/x-jquery-tmpl"> 
    <td> 
    <b>${Test_Label}</b> 
    </td> 
</script> 
<script id="TextBox_EntryTemplate" type="text/x-jquery-tmpl"> 
    <td> 
    <label style="color:blue">${Test_Label}</label> 
    </td> 
    <td > 
        <input type="text"></input> 
    </td> 
</script> 
<script id="RowTemplate" type="text/x-jquery-tmpl"> 
    <tr id="i"> 
        <td> 
            <table border="0" cellpadding="0" cellspacing="0"> 
                <tr> 
                    ${input_A} 
                </tr> 
            </table> 
        </td>                
    </tr> 
</script> 
<script id="HelloA_TestTemplate" type="text/x-jquery-tmpl"> 
  $('#RowTemplate').tmpl( { input_A: {{tmpl( { Test_Label: 'Hello A' } ) '#Simple_EntryTemplate' }} } ).html() 
</script> 
<script id="HelloB_TestTemplate" type="text/x-jquery-tmpl"> 
  $('#RowTemplate').tmpl( { input_A: {{tmpl( { Test_Label: 'Hello B' } ) '#TextBox_EntryTemplate' }} } ) 
</script> 
<script id="addressEditTemplate" type="text/x-jquery-tmpl"> 
  <table> 
  {{each(i, testItem) testItems}} 
    <tr>{{tmpl(testItem) get_TemplateScript(type) }}</tr> 
  {{/each}} 
  </table> 
</script> 
<script language="javascript" type="text/javascript"> 
function template_test(  ) { 
    var test = { 
     testItems: [ 
     { type: 'HelloA' }, 
     { type: 'HelloB' } 
     ] 
    }; 
    $('#divTest').empty(); 
    $('#addressEditTemplate').tmpl(test).appendTo('#divTest'); 
} 
</script> 
</head> 
<body> 
<div id="divTest"></div> 
<script language="javascript" type="text/javascript"> 
template_test(); 
</script> 
</body>

What am I doing wrong to show the jQuery code as well as the correctly generated results ?

Thanks

BorisMoore / jquery-tmpl

Nesting templates shows results + code #114